Breadcrumb

Shows the path to the current page.

import {
  BuiBreadcrumb, BuiBreadcrumbList, BuiBreadcrumbItem,
  BuiBreadcrumbLink, BuiBreadcrumbPage, BuiBreadcrumbSeparator,
} from 'ng-blatui';

<nav buiBreadcrumb>
  <ol buiBreadcrumbList>
    <li buiBreadcrumbItem><a buiBreadcrumbLink href="/">Home</a></li>
    <li buiBreadcrumbSeparator></li>
    <li buiBreadcrumbItem><span buiBreadcrumbPage>Settings</span></li>
  </ol>
</nav>

With icon

<li buiBreadcrumbItem>
  <a buiBreadcrumbLink href="/" class="inline-flex items-center gap-1.5"><svg><!-- home --></svg> Home</a>
</li>

Custom separator

<!-- the separator projects its content -->
<li buiBreadcrumbSeparator><svg><!-- slash --></svg></li>

Dot separator

<li buiBreadcrumbSeparator><span class="bg-muted-foreground block size-1 rounded-full"></span></li>

Contained

<ol buiBreadcrumbList class="bg-background min-h-9 w-fit rounded-md border px-3 py-1">…</ol>

With badge

<li buiBreadcrumbItem class="flex items-center gap-2">
  <span buiBreadcrumbPage>Settings</span><span buiBadge variant="secondary">Beta</span>
</li>

Dropdown

<!-- collapse middle crumbs into a dropdown menu -->
<li buiBreadcrumbItem class="relative inline-block">
  <button buiBreadcrumbLink ngMenuTrigger [menu]="m" aria-label="More">…</button>
  <div ngMenu #m="ngMenu" buiDropdownMenu>
    <div ngMenuItem value="docs" buiDropdownMenuItem>Documentation</div>
  </div>
</li>