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>
    • <BreadcrumbItem>
      • <BreadcrumbLink>

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>

API

Attributes

Breadcrumb

Name Description Type Default
Mode Defines the breadcrumb items activation mode. BreadcrumbMode None

BreadcrumbItem

Name Description Type Default
Active If set to true, renders span instead of a element. bool false

BreadcrumbLink

Name Description Type Default
To Path to the destination page. string null
Target The target attribute specifies where to open the linked document. Target Default
Match URL matching behavior for a link. Match All
Title Defines the title of a link, which appears to the user as a tooltip. string null
On this page