Breadcrumbs
Navigation breadcrumbs with multiple type and divider variants.
Text — chevron divider
Default text style
razor
<Breadcrumb Items="@items" Type="text" Divider="chevron" />
@code {
private List<Breadcrumb.BreadcrumbItem> items = new()
{
new() { Label = "Home", Href = "/" },
new() { Label = "Settings", Href = "/settings" },
new() { Label = "Team", Href = "/settings/team" },
new() { Label = "Members", Href = "#" }
};
}Text — slash divider
Slash divider variant
razor
<Breadcrumb Items="@items" Type="text" Divider="slash" />Collapsed (mobile)
Ellipsis in the middle for narrow screens
razor
<Breadcrumb Items="@items" Type="text" Divider="chevron" Collapsed="true" />
<Breadcrumb Items="@items" Type="text" Divider="slash" Collapsed="true" />Text with line
Active crumb underlined
razor
<Breadcrumb Items="@items" Type="text-line" Divider="chevron" />
<Breadcrumb Items="@items" Type="text-line" Divider="slash" />Button type
Each crumb rendered as a pill
razor
<Breadcrumb Items="@items" Type="button" Divider="chevron" />
<Breadcrumb Items="@items" Type="button" Divider="slash" />Without home icon
Hide the leading house glyph
razor
<Breadcrumb Items="@items"
Type="text"
Divider="chevron"
ShowHomeIcon="false" />