Breadcrumb

Description

<x-breadcrumb>
<x-breadcrumb.list>
<x-breadcrumb.item>
<x-breadcrumb.link href="/">Home</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.link href="/docs/components/accordion">Components</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.page>Breadcrumb</x-breadcrumb.page>
</x-breadcrumb.item>
</x-breadcrumb.list>
</x-breadcrumb>

Installation

php artisan vendor:publish --tag=breadcrumb --force

Usage

<x-breadcrumb>
<x-breadcrumb.list>
<x-breadcrumb.item>
<x-breadcrumb.link href="/">Home</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.link href="/components">Components</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.page>Breadcrumb</x-breadcrumb.page>
</x-breadcrumb.item>
</x-breadcrumb.list>
</x-breadcrumb>

Examples

Custom Separator

<x-breadcrumb>
<x-breadcrumb.list>
<x-breadcrumb.item>
<x-breadcrumb.link href="/">Home</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator>
<x-lucide-chevrons-right />
</x-breadcrumb.separator>
<x-breadcrumb.item>
<x-breadcrumb.link href="/components">Components</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator>
<x-lucide-chevrons-right />
</x-breadcrumb.separator>
<x-breadcrumb.item>
<x-breadcrumb.page>Breadcrumb</x-breadcrumb.page>
</x-breadcrumb.item>
</x-breadcrumb.list>
</x-breadcrumb>

Collapsed

<x-breadcrumb>
<x-breadcrumb.list>
<x-breadcrumb.item>
<x-breadcrumb.link href="/">
Home
</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.ellipsis />
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.link href="/docs/components/accordion">
Components
</x-breadcrumb.link>
</x-breadcrumb.item>
<x-breadcrumb.separator />
<x-breadcrumb.item>
<x-breadcrumb.page>Breadcrumb</x-breadcrumb.page>
</x-breadcrumb.item>
</x-breadcrumb.list>
</x-breadcrumb>