Go back

Text — chevron divider

<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

<Breadcrumb Items="@items" Type="text" Divider="slash" />

Collapsed (mobile)

<Breadcrumb Items="@items" Type="text" Divider="chevron" Collapsed="true" />
<Breadcrumb Items="@items" Type="text" Divider="slash"   Collapsed="true" />

Text with line

<Breadcrumb Items="@items" Type="text-line" Divider="chevron" />
<Breadcrumb Items="@items" Type="text-line" Divider="slash" />

Button type

<Breadcrumb Items="@items" Type="button" Divider="chevron" />
<Breadcrumb Items="@items" Type="button" Divider="slash" />

Without home icon

<Breadcrumb Items="@items"
            Type="text"
            Divider="chevron"
            ShowHomeIcon="false" />

An unhandled error has occurred. Reload 🗙