Skip to content
Layout

Breadcrumbs

Hierarchical navigation trail for the current page.

React source Astro source Core source

Breadcrumbs

Hierarchical trail for the current page. Pass items with stable ids; omit href on the current crumb.

Examples

Default

A short trail ending on the current page.

Demo.tsxtsx
import { Breadcrumbs } from '@var-ui/react';

<Breadcrumbs
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'docs', label: 'Docs', href: '/docs' },
    { id: 'current', label: 'Breadcrumbs' },
  ]}
/>

Collapse

Set maxItems so long trails collapse to an ellipsis that expands on click (itemsBeforeCollapse / itemsAfterCollapse default to 1).

Demo.tsxtsx
import { Breadcrumbs } from '@var-ui/react';

<Breadcrumbs
  maxItems={3}
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'products', label: 'Products', href: '/products' },
    { id: 'hardware', label: 'Hardware', href: '/products/hardware' },
    { id: 'laptops', label: 'Laptops', href: '/products/hardware/laptops' },
    { id: 'current', label: 'Pro 16' },
  ]}
/>

Props

Accessibility

The root is a nav landmark (label defaults to "Breadcrumb"). Built on RAC breadcrumbs; the ellipsis control is a button labeled “Show all breadcrumbs”.