Blazorise Breadcrumb component

Help users see where they are and return to a parent page.

Use breadcrumbs for pages within a hierarchy, such as product categories, documentation sections, or nested administration screens.

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

Structure

A Breadcrumb contains items for the current page and its ancestors. Each item can include a link to its destination.

  • <Breadcrumb>Contains the navigation trail.
    • <BreadcrumbItem>One location in the trail; can mark the current page.
      • <BreadcrumbLink>A 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.

On this page