Breadcrumb component

Breadcrumbs are used to indicate the current page’s location. Add Active attribute to active 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="true">
        <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">Account</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <BreadcrumbLink To="account/settings">Settings</BreadcrumbLink>
    </BreadcrumbItem>
</Breadcrumb>

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 None
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