Breadcrumb

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

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

Custom Separator

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

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

Dropdown

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

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

Collapsed

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

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

Publishing Views

Use the following commands to publish these views:

php artisan april:publish breadcrumb
php artisan april:publish breadcrumb-item
php artisan april:publish breadcrumb-link
php artisan april:publish breadcrumb-separator
php artisan april:publish breadcrumb-page
php artisan april:publish breadcrumb-elipsis
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.