Breadcrumb

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

Default

With Icons

Custom Separator

Long Path

Usage

<twig:Breadcrumb>
    <twig:BreadcrumbItem href="/">Home</twig:BreadcrumbItem>
    <twig:BreadcrumbSeparator />
    <twig:BreadcrumbItem href="/components">Components</twig:BreadcrumbItem>
    <twig:BreadcrumbSeparator />
    <twig:BreadcrumbItem :current="true">Breadcrumb</twig:BreadcrumbItem>
</twig:Breadcrumb>

<twig:BreadcrumbItem href="/">
    <twig:ux:icon name="lucide:home" class="size-4" />
</twig:BreadcrumbItem>

<twig:BreadcrumbSeparator>
    <span>/</span>
</twig:BreadcrumbSeparator>