Breadcrumbs

Usage

Use the currentPage prop to indicate the current page in the breadcrumb trail. This will render it as a <span> instead of a link and add the appropriate ARIA attributes.

---
import { Breadcrumbs, BreadcrumbsItem } from '@yatoday/astro-ui/astro';
---

<!-- Default -->
<Breadcrumbs>
  <BreadcrumbsItem href="/" label="Home" />
  <BreadcrumbsItem href="/products" label="Products" />
  <BreadcrumbsItem label="Current Page" currentPage={true} />
</Breadcrumbs>

<!-- Home icon variant -->
<Breadcrumbs>
  <BreadcrumbsItem href="/" label="Home" hasIcon>
    <Icon name="tabler:home" slot="icon" />
  </BreadcrumbsItem>
  <BreadcrumbsItem href="/products" label="Products" />
  <BreadcrumbsItem label="Current Page" currentPage={true} />
</Breadcrumbs>

<!-- Custom separator variant -->
<Breadcrumbs>
  <BreadcrumbsItem href="/" label="Home" hasIcon>
    <Icon name="tabler:home" slot="icon" />
    <span slot="separator" class="separator" aria-hidden="true">
      <Icon name="tabler:chevrons-right" />
    </span>
  </BreadcrumbsItem>
  <BreadcrumbsItem href="/docs" label="Documentation">
    <span slot="separator" class="separator" aria-hidden="true">
      <Icon name="tabler:chevrons-right" />
    </span>
  </BreadcrumbsItem>
  <BreadcrumbsItem label="Current Page" currentPage={true} />
</Breadcrumbs>

<!-- Array props -->
<Breadcrumbs
  items={[
    { href: '/', icon: 'tabler:home' },
    { href: '/products', label: 'Products' },
    { href: '/products', label: 'Current Page', currentPage: true },
  ]}
/>

Props

Breadcrumbs

BreadcrumbsItem