StellarAdmin

Breadcrumbs provide navigation context and allow users to quickly navigate the current page's hierarchy

Theme

<sa-breadcrumb>
    <sa-breadcrumb-list>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Europe</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Italy</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-page>Grand Hotel Venice</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Usage

Wrap the trail in <sa-breadcrumb> and <sa-breadcrumb-list>, put each link in an <sa-breadcrumb-item>, separate items with <sa-breadcrumb-separator>, and mark the current page with <sa-breadcrumb-page>.

<sa-breadcrumb>
    <sa-breadcrumb-list>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="...">Level 1</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="...">Level 2</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-page>Current Page</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Examples

Custom separator

Use the Icon Tag Helper for a custom separator.

Theme

<sa-breadcrumb>
    <sa-breadcrumb-list>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator>
            <sa-icon name="slash"/>
        </sa-breadcrumb-separator>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Europe</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator>
            <sa-icon name="slash"/>
        </sa-breadcrumb-separator>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">
                Italy
            </sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator>
            <sa-icon name="slash"/>
        </sa-breadcrumb-separator>
        <sa-breadcrumb-page>Grand Hotel Venice</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Collapsed

Use the <sa-breadcrumb-ellipsis> component to collapse a large navigation hierarchy.

Theme

<sa-breadcrumb>
    <sa-breadcrumb-list>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-ellipsis />
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Trip #TRV-987</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Custom CSS

Use the class attribute to add custom CSS styling to any of the breadcrumb components.

Theme

<sa-breadcrumb>
    <sa-breadcrumb-list class="h-8 gap-2 rounded-md border px-3 text-sm">
        <sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
            <sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
            <sa-breadcrumb-link href="#">Bookings</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
            <sa-breadcrumb-link href="#">Trip #TRV-987</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Icons

Use the Icon Tag Helper and custom CSS to display icons next to navigation items.

Theme

<sa-breadcrumb>
    <sa-breadcrumb-list>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#" class="flex items-center gap-2">
                <sa-icon name="tickets" class="size-4"/>
                Bookings
            </sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-item>
            <sa-breadcrumb-link href="#" class="flex items-center gap-2">
                <sa-icon name="plane" class="size-4"/>
                Trip #TRV-987
            </sa-breadcrumb-link>
        </sa-breadcrumb-item>
        <sa-breadcrumb-separator/>
        <sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
    </sa-breadcrumb-list>
</sa-breadcrumb>

Accessibility

<sa-breadcrumb> renders a <nav> landmark labelled "breadcrumb". Use <sa-breadcrumb-page> for the current page so it renders aria-current="page", and use <sa-breadcrumb-link> for every other item. Separators and the ellipsis are decorative and hidden from assistive technology.

When the ellipsis opens a menu of collapsed items, give its trigger an accessible name, for example aria-label="More pages".

API Reference

Renders a <nav> element with aria-label="breadcrumb".

Renders an <ol> element containing the breadcrumb items.

Renders an <li> element.

Renders an <a> element.

Routing attributes

The breadcrumb link also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

Renders a <span> element with aria-current="page" representing the current page.

Renders an <li> element that is hidden from assistive technology. It displays a chevron icon by default, or its child content when supplied.

Renders a <span> element containing an ellipsis icon, used to indicate collapsed items.

Breadcrumb

On this page