Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Usage
example.blade.php 
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Components</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Breadcrumb</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>

Composition
code 
Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

With ellipsis
example.blade.php 
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-ellipsis />
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Components</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator />
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Breadcrumb</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>

Custom separator

Pass children to breadcrumb-separator to replace the default chevron.

example.blade.php 
<x-slate::breadcrumb>
    <x-slate::breadcrumb-list>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-link href="#">Home</x-slate::breadcrumb-link>
        </x-slate::breadcrumb-item>
        <x-slate::breadcrumb-separator>/</x-slate::breadcrumb-separator>
        <x-slate::breadcrumb-item>
            <x-slate::breadcrumb-page>Docs</x-slate::breadcrumb-page>
        </x-slate::breadcrumb-item>
    </x-slate::breadcrumb-list>
</x-slate::breadcrumb>

API Reference

Parts
Component Element Notes
breadcrumb nav Sets aria-label="breadcrumb"
breadcrumb-list ol Flex row of items
breadcrumb-item li Single crumb
breadcrumb-link a Navigable crumb (as for buttons/custom)
breadcrumb-page span Current page (aria-current="page")
breadcrumb-separator li Default chevron flips in RTL
breadcrumb-ellipsis span Collapsed middle segments
Last updated .