DuneUI

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

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

Usage

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

Examples

Custom separator

Use the Icon Tag Helper for a custom separator.

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

Collapsed

Use the dui-breadcrumb-ellipsis component to collapse a large navigation hierarchy.

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

Custom CSS

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

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

Icons

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

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

API Reference

The <dui-breadcrumb> tag helper renders a <nav> element with aria-label="breadcrumb". It has no attributes of its own, but forwards any standard global attributes to the rendered element.

The <dui-breadcrumb-list> tag helper renders an <ol> element containing the breadcrumb items. It has no attributes of its own.

The <dui-breadcrumb-item> tag helper renders an <li> element. It has no attributes of its own.

The <dui-breadcrumb-link> tag helper renders an <a> element. In addition to the routing attributes below, it forwards any standard <a> attributes (such as href, target, or rel) to the rendered 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

The <dui-breadcrumb-page> tag helper renders a <span> element with aria-current="page" representing the current page. It has no attributes of its own.

The <dui-breadcrumb-separator> tag helper renders an <li> element that is hidden from assistive technology. It displays a chevron icon by default, or its child content when supplied. It has no attributes of its own.

The <dui-breadcrumb-ellipsis> tag helper renders a <span> element containing an ellipsis icon, used to indicate collapsed items. It has no attributes of its own.

Breadcrumb

On this page