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>

API

Parameters

Breadcrumb

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Breadcrumb component.

 RenderFragmentnull
Mode

Defines the breadcrumb activation mode.

Possible values:None, Auto

 BreadcrumbModeBreadcrumbMode.None

BreadcrumbItem

Parameter Description TypeDefault
Active

Indicates whether this breadcrumb item is the active (current) item.

 boolfalse
ChildContent

Specifies the content to render inside this BreadcrumbItem component.

 RenderFragmentnull

BreadcrumbLink

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this BreadcrumbLink component.

 RenderFragmentnull
Disabled

When set to 'true', disables the component's functionality and places it in a disabled state.

 boolfalse
Match

URL matching behavior for a link.

Possible values:Prefix, All, Custom

 MatchMatch.All
Target

The target attribute specifies where to open the linked document.

 TargetTarget.Default
Title

Defines the title of a link, which appears to the user as a tooltip.

 string
To

Link to the destination page.

 string

Events

BreadcrumbLink

Event Description Type
Clicked

Occurs when the item is clicked.

 EventCallback<MouseEventArgs>
On this page