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/0.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/0.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
                        <i class="fas fa-angle-down"></i>
                    </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/0.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>