Breadcrumb Component — Astro

Breadcrumb Component

An accessible breadcrumb navigation component. Supports custom separators (chevron, slash, arrow, or custom character) and responsive truncation on small screens.

Props

• items (array, required) - Array of objects with label and optional href. The last item or any item without href is shown as the current page.
• separator (string, optional) - One of 'chevron' (default), 'slash', 'arrow', or a custom character (e.g. '>', '·')
• class (string, optional) - Additional CSS classes

Item Structure

• label (string, required) - Link or current page text
• href (string, optional) - URL for the link. Omit for the current page.

Basic Usage (Chevron Separator)

---
import Breadcrumb from '../../components/Breadcrumb.astro';
---

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Components', href: '/docs/components' },
    { label: 'Breadcrumb' },
  ]}
/>

Separator Variants

Slash

<Breadcrumb
  separator="slash"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Breadcrumb' },
  ]}
/>

Arrow

Custom Character

<Breadcrumb
  separator=">"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Blog', href: '/blog' },
    { label: 'Post Title' },
  ]}
/>

Features

• Semantic markup - <nav aria-label="Breadcrumb"> with <ol> and <li>
• Current page - Last item or item without href uses aria-current="page" and is not a link
• Separator customization - Chevron (icon), slash, arrow (›), or any custom character
• Responsive - On small screens (≤639px), long labels truncate with ellipsis; current page label is not truncated
• Theme-aware - Uses design system variables for color and spacing
• Accessible - Focus styles, hover states, and screen reader friendly

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.