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

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`