Breadcrumb Component — Astro

Navigation breadcrumbs with separator customization and responsive behavior

Breadcrumb Component

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

Add this component

The command below includes <strong>Breadcrumb</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

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)

Live Example

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

Separator Variants

Slash

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

Arrow

Live Example

Custom Character

Live Example
astro astro 
<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

Other frameworks: Vanilla · Svelte · Vue · React