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

Breadcrumb

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

BreadcrumbItem

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

BreadcrumbLink

Name	Type	Default	Description
To	string	null	Path to the destination page.
Target	Target	None	The target attribute specifies where to open the linked document.
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.