Breadcrumbs

Help users navigate and understand their place within your application.

<x-breadcrumbs>
    <x-breadcrumbs.item href="#">Home</x-breadcrumbs.item>
    <x-breadcrumbs.item href="#">Blog</x-breadcrumbs.item>
    <x-breadcrumbs.item>Post</x-breadcrumbs.item>
</x-breadcrumbs>

With slashes

Use slashes instead of chevrons to separate breadcrumb items.

<x-breadcrumbs>
    <x-breadcrumbs.item href="#" separator="slash">Home</x-breadcrumbs.item>
    <x-breadcrumbs.item href="#" separator="slash">Blog</x-breadcrumbs.item>
    <x-breadcrumbs.item>Post</x-breadcrumbs.item>
</x-breadcrumbs>

As a shorthand, you can pass a


    separator

prop into a


    breadcumbs

component directly.

<x-breadcrumbs separator="slash">
    ...
</x-breadcrumbs>

With icon

Use an icon instead of text for a particular breadcrumb item.

Recomended to use mini icon variant with prefix


    m-...

for breadcrumbs. More information visit icon component.

<x-breadcrumbs>
    <x-breadcrumbs.item href="#" icon="m-home" />
    <x-breadcrumbs.item href="#">Blog</x-breadcrumbs.item>
    <x-breadcrumbs.item>Post</x-breadcrumbs.item>
</x-breadcrumbs>

With ellipsis

Truncate a long breadcrumb list with an ellipsis.

<x-breadcrumbs>
    <x-breadcrumbs.item href="#" icon="m-home" />
    <x-breadcrumbs.item icon="m-ellipsis-horizontal" />
    <x-breadcrumbs.item>Post</x-breadcrumbs.item>
</x-breadcrumbs>

With ellipsis dropdown

Truncate a long breadcrumb list into a single ellipsis dropdown.

<x-breadcrumbs>
    <x-breadcrumbs.item href="#" icon="m-home" />
 
    <x-breadcrumbs.item>
        <x-dropdown position="bottom-start">
            <x-button icon="o-ellipsis-horizontal" variant="ghost" size="sm" inset="top bottom" />
 
            <x-navmenu>
                <x-navmenu.item>Client</x-navmenu.item>
                <x-navmenu.item icon="o-arrow-turn-down-right">Team</x-navmenu.item>
                <x-navmenu.item icon="o-arrow-turn-down-right">User</x-navmenu.item>
            </x-navmenu>
        </x-dropdown>
    </x-breadcrumbs.item>
 
    <x-breadcrumbs.item>Post</x-breadcrumbs.item>
</x-breadcrumbs>