Breadcrumbs

Breadcrumbs are used to indicate the current page’s location. Add Active attribute to active BreadcrumbItem.

Structure

  • <Breadcrumb>
    • <BreadcrumbItem>
      • <BreadcrumbLink>

Example

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

Name Type Default Description
Mode BreadcrumbMode None Defines the breadcrumb items activation mode.
Name Type Default Description
Active boolean false If set to true, renders span instead of a
Name Type Default Description
To string null Path to the destination page.
Match Match All URL matching behavior for a link.
Title string null Defines the title of a link, which appears to the user as a tooltip.