Component
◂

Breadcrumb

Hierarchical navigation trail with customizable separators and full ARIA support.

Import

import { Breadcrumb } from '@stareezy-ui/components'

Basic usage

Live Preview

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Shoes' },  // current page — no href
  ]}
/>

Custom separator

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Docs', href: '/docs' },
    { label: 'Components' },
  ]}
  separator="/"        // string
  // separator={<ChevronIcon />}  // or a React element
/>

With icons

<Breadcrumb
  items={[
    { label: 'Home', href: '/', icon: <HomeIcon /> },
    { label: 'Settings', href: '/settings', icon: <SettingsIcon /> },
    { label: 'Profile' },
  ]}
/>

With BoxLayoutProps

<Breadcrumb
  items={items}
  mb={16}
  px={{ base: 12, md: 0 }}
/>

Props

PropTypeDescription
itemsreqBreadcrumbItem[]Array of breadcrumb items. The last item is treated as the current page.
separatorstring | ReactNodeSeparator between items. Defaults to "›".
maxItemsnumberCollapse items in the middle when the count exceeds this value.

BreadcrumbItem type

interface BreadcrumbItem {
  label: string
  href?: string       // if omitted, renders as current-page text (no link)
  icon?: ReactNode    // optional icon before the label
}

Accessibility

ℹ
Breadcrumb renders a <nav> element with aria-label="Breadcrumb" and an ordered list. The current page item has aria-current="page". Separator elements are hidden from assistive technologies with aria-hidden="true".
<!-- Rendered HTML -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li aria-hidden="true">›</li>
    <li><a href="/docs">Docs</a></li>
    <li aria-hidden="true">›</li>
    <li aria-current="page">Components</li>
  </ol>
</nav>

Themes

Breadcrumb is Theme_Reactive — all colors (link color, separator color, current-page color) are resolved through useThemedColors() at render time. It renders correctly in all five built-in themes: quasar, light, dark, aurora, and steins-gate.