Components
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
php artisan blatui:add breadcrumb
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Components</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>Breadcrumb</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>Badge
{{-- Each crumb rendered as an outline badge / pill. --}}
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.badge variant="outline" href="#" class="text-muted-foreground hover:text-foreground font-normal">Home</x-ui.badge>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.badge variant="outline" href="#" class="text-muted-foreground hover:text-foreground font-normal">Components</x-ui.badge>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.badge variant="outline" class="border-primary text-primary font-normal">Breadcrumb</x-ui.badge>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>Contained
{{-- The whole trail sits inside a bordered container. --}}
<x-ui.breadcrumb>
<x-ui.breadcrumb-list class="bg-background min-h-9 w-fit rounded-md border px-3 py-1">
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#" class="inline-flex items-center gap-1.5"><x-lucide-house class="size-3.5" aria-hidden="true" /> Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Components</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>Breadcrumb</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>Custom Separator
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator><x-lucide-slash aria-hidden="true" /></x-ui.breadcrumb-separator>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Components</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator><x-lucide-slash aria-hidden="true" /></x-ui.breadcrumb-separator>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>Breadcrumb</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>Dot Separator
{{-- Small dot separators between items. --}}
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator><span class="bg-muted-foreground block size-1 rounded-full"></span></x-ui.breadcrumb-separator>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Components</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator><span class="bg-muted-foreground block size-1 rounded-full"></span></x-ui.breadcrumb-separator>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>Breadcrumb</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>Dropdown
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.dropdown-menu>
<x-ui.dropdown-menu-trigger>
<button type="button" aria-label="Show more breadcrumbs" class="hover:text-foreground flex size-6 items-center justify-center rounded-md">
<x-lucide-more-horizontal class="size-4" aria-hidden="true" />
</button>
</x-ui.dropdown-menu-trigger>
<x-ui.dropdown-menu-content align="start">
<x-ui.dropdown-menu-item>Documentation</x-ui.dropdown-menu-item>
<x-ui.dropdown-menu-item>Themes</x-ui.dropdown-menu-item>
<x-ui.dropdown-menu-item>GitHub</x-ui.dropdown-menu-item>
</x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#">Components</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>Breadcrumb</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>With Icon
<x-ui.breadcrumb>
<x-ui.breadcrumb-list>
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#" class="inline-flex items-center gap-1.5"><x-lucide-house class="size-3.5" aria-hidden="true" /> Home</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-link href="#" class="inline-flex items-center gap-1.5"><x-lucide-folder class="size-3.5" aria-hidden="true" /> Projects</x-ui.breadcrumb-link>
</x-ui.breadcrumb-item>
<x-ui.breadcrumb-separator />
<x-ui.breadcrumb-item>
<x-ui.breadcrumb-page>BlatUI</x-ui.breadcrumb-page>
</x-ui.breadcrumb-item>
</x-ui.breadcrumb-list>
</x-ui.breadcrumb>API Reference
Props, slots and exposed methods for
<x-ui.breadcrumb>.
Slots
| Slot | Description |
|---|---|
default |
The breadcrumb trail, built from composition parts. Wrap items in <x-ui.breadcrumb-list>, then use <x-ui.breadcrumb-item> for each crumb with <x-ui.breadcrumb-link href> for links, <x-ui.breadcrumb-page> for the current page, <x-ui.breadcrumb-separator> between items, and <x-ui.breadcrumb-ellipsis> for collapsed segments. |