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.

The components include schema.org BreadcrumbList markup for improved SEO. Use the position prop to specify the position of each item in the breadcrumb trail.

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

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

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

<!-- Custom separator variant -->
<Breadcrumbs>
  <BreadcrumbsItem href="/" label="Home" hasIcon position={1}>
    <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" position={2}>
    <span slot="separator" class="separator" aria-hidden="true">
      <Icon name="tabler:chevrons-right" />
    </span>
  </BreadcrumbsItem>
  <BreadcrumbsItem label="Current Page" currentPage={true} position={3} />
</Breadcrumbs>

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

Props

Breadcrumbs

BreadcrumbsItem