Breadcrumbs

Basic trail

Pass an items array of objects. The final item without an href is treated as the current page.

1. Home
2. Reports
3. Annual report 2024

import { Breadcrumbs } from '@eekodigital/raster';

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Reports', href: '/reports' },
    { label: 'Annual report 2024' },
  ]}
/>

Single item

When the user is at the top level, a single item is sufficient.

1. Dashboard

<Breadcrumbs items={[{ label: 'Dashboard' }]} />

Longer trail

1. Home
2. Compliance
3. Audits
4. 2024
5. Q1 review

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Compliance', href: '/compliance' },
    { label: 'Audits', href: '/compliance/audits' },
    { label: '2024', href: '/compliance/audits/2024' },
    { label: 'Q1 review' },
  ]}
/>

Props

Prop	Type	Default	Description
items	Array<{ label: string; href?: string }>	—	Ordered list of crumbs. Items with an href are rendered as links; the last item is typically the current page (no href).
className	string	—	Additional CSS class names on the outer <nav> element.