Breadcrumb

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

Component Code 
<x-aui::breadcrumb>
    <x-slot:list>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/">Home</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-item>
            <x-aui::dropdown-menu>
                <x-slot:trigger class="flex items-center gap-1">
                    <x-aui::breadcrumb-elipsis />
                    <span class="sr-only">Toggle menu</span>
                </x-slot:trigger>
                <x-slot:content align="start">
                    <x-aui::dropdown-menu-item>Documentation</x-aui::dropdown-menu-item>
                    <x-aui::dropdown-menu-item>Themes</x-aui::dropdown-menu-item>
                    <x-aui::dropdown-menu-item>GitHub</x-aui::dropdown-menu-item>
                </x-slot:content>
            </x-aui::dropdown-menu>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/docs/0.x/components/accordion">Components</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-page>Breadcrumb</x-aui::breadcrumb-page>
        </x-aui::breadcrumb-item>
    </x-slot:list>
</x-aui::breadcrumb>

Custom Separator

You can use a custom item as separator for breadcrumb-separator.

Component Code 
<x-aui::breadcrumb>
    <x-slot:list>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/">Home</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator>
            <x-slot:separator>
                /
            </x-slot:separator>
        </x-aui::breadcrumb-separator>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/docs/0.x/components/accordion">Components</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator>
            <x-slot:separator>
                /
            </x-slot:separator>
        </x-aui::breadcrumb-separator>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-page>Breadcrumb</x-aui::breadcrumb-page>
        </x-aui::breadcrumb-item>
    </x-slot:list>
</x-aui::breadcrumb>

Dropdown

You can compose breadcrumb-item with a dropdown-menu to create a dropdown in the breadcrumb.

Component Code 
<x-aui::breadcrumb>
    <x-slot:list>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/">Home</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator>
            <x-slot:separator>
                /
            </x-slot:separator>
        </x-aui::breadcrumb-separator>
        <x-aui::breadcrumb-item>
            <x-aui::dropdown-menu>
                <x-slot:trigger>
                    <button class="bg-transparent cursor-pointer flex items-center gap-1">
                        Components
                        <i class="fas fa-angle-down"></i>
                    </button>
                </x-slot:trigger>
                <x-slot:content align="start">
                    <x-aui::dropdown-menu-item>Documentation</x-aui::dropdown-menu-item>
                    <x-aui::dropdown-menu-item>Themes</x-aui::dropdown-menu-item>
                    <x-aui::dropdown-menu-item>GitHub</x-aui::dropdown-menu-item>
                </x-slot:content>
            </x-aui::dropdown-menu>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator>
            <x-slot:separator>
                /
            </x-slot:separator>
        </x-aui::breadcrumb-separator>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-page>Breadcrumb</x-aui::breadcrumb-page>
        </x-aui::breadcrumb-item>
    </x-slot:list>
</x-aui::breadcrumb>

Collapsed

We provide a breadcrumb-elipsis component to show a collapsed state when the breadcrumb is too long.

Component Code 
<x-aui::breadcrumb>
    <x-slot:list>
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/">Home</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-elipsis />
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-link href="/docs/0.x/components/accordion">Components</x-aui::breadcrumb-link>
        </x-aui::breadcrumb-item>
        <x-aui::breadcrumb-separator />
        <x-aui::breadcrumb-item>
            <x-aui::breadcrumb-page>Breadcrumb</x-aui::breadcrumb-page>
        </x-aui::breadcrumb-item>
    </x-slot:list>
</x-aui::breadcrumb>