Livewire Components

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>