Layout

TwBreadcrumb

TwBreadcrumb is a Blazor breadcrumb component that shows the current page location. Build trails automatically with Auto, or manually with Label, Href and Icon.

Last updated 24 September 2026

Breadcrumbs

Usage of breadcrumb is simplified, you can use the component and allow for automatic breadcrumbs based on the current uri structure:

Razor

<TwBreadcrumb Auto />

Manual Breadcrumbs

You can also manually configure the breadcrumbs:

Razor

<TwBreadcrumb Breadcrumbs="@breadcrumbs" />

CSHARP

@code {
    private readonly List<BreadcrumbItem> breadcrumbs = new()
    {
        new()
        {
            Icon = Icon.House,
            Label = "Home",
            Href = "/"
        },
        new ()
        {
            Icon = Icon.Wrench,
            Label = "Settings",
            Href = "/"
        }
    };
}

Inline Breadcrumbs

You can also manually configure the breadcrumbs inline like so:

Razor

<TwBreadcrumb>
    <TwBreadcrumbItem Label="Home" Href="/" />
    <TwBreadcrumbItem Label="Docs" Href="/" />
    <TwBreadcrumbItem Label="Breadcrumb" Href="/breadcrumb" Icon="Icon.Segmented_Nav" AriaCurrent />
</TwBreadcrumb>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwBreadcrumbTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`List`	string
`Item`	string
`Separator`	string
`Label`	string

Full reference: TwBreadcrumbTheme on the API docs.