Blazorise Breadcrumb component

A simple breadcrumb component to improve your navigation experience.

Breadcrumbs are used to indicate the current page's location.

You can inform the current page using the Active attribute in a BreadcrumbItem.

<Breadcrumb> the main container.
- <BreadcrumbItem> the breadcrumb item, which can be active or not.
  - <BreadcrumbLink> the link to the destination page.

Examples

Manual mode

This is the default mode. Meaning you need to set BreadcrumbItem.Active property implicitly.

<Breadcrumb>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Library</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem Active>
        <BreadcrumbLink To="#">Data</BreadcrumbLink>
    </BreadcrumbItem>
</Breadcrumb>

Auto mode

In this mode breadcrumb items will respond to navigation changes and will be activates automatically.

<Breadcrumb Mode="BreadcrumbMode.Auto">
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Account</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Settings</BreadcrumbLink>
    </BreadcrumbItem>
</Breadcrumb>

Best Practices

Current Location

Breadcrumbs communicate the user's location within a hierarchy and should not replace the application's primary navigation. Render intermediate items as links and the current page as plain text so the active location is unambiguous.

Readable Path

Start with a recognizable root and keep labels short enough for the complete path to remain readable. Automatic mode is useful when route names already produce friendly labels; use manual mode when the hierarchy or wording needs to reflect product terminology.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.