Breadcrumb

Import#

import { Breadcrumb } from '@volue/wave-react';

Breadcrumb is a compound component. Each part owns exactly one element, so you can style the list and the individual crumbs directly.

• ​
  Breadcrumb.Root: the <nav> landmark. Requires a label.
• ​
  Breadcrumb.List: the ordered list holding the crumbs.
• ​
  Breadcrumb.Item: a single crumb: a link, or the current page.

When to use#

Use Breadcrumb when content is nested several levels deep and users need a way back up.

If you’re using other navigational elements, such as Sidebar Navigation or Nav Bar, consider whether your users need the additional support of breadcrumbs.

Examples#

Basic#

Mark the crumb representing the current page with isCurrent. It renders as non-interactive text with aria-current="page"; every other crumb is a link.

Sizes#

Breadcrumb comes in two sizes: medium and small. By default, it uses medium size. The separator scales with the label automatically.

Truncation#

Anything longer than roughly twenty characters will be clipped with an ellipsis. The full label is available when hovering.

With routing#

If you need to use the Link component provided by your routing package (e.g. React Router​ or Next.js​), it's recommended to compose it with Breadcrumb.Item. Any props you add go to that component, so to, href and click handlers all work as usual.

import { Link } from 'react-router';
import { Breadcrumb } from '@volue/wave-react';

function App() {
  return (
    <Breadcrumb.Root label="Breadcrumb">
      <Breadcrumb.List>
        <Breadcrumb.Item as={Link} to="/">
          {'Home'}
        </Breadcrumb.Item>
        <Breadcrumb.Item as={Link} to="/products">
          {'Products'}
        </Breadcrumb.Item>
        <Breadcrumb.Item isCurrent>{'Turbine 4'}</Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

Accessibility#

• ​
  Breadcrumb.Root renders a <nav> landmark and requires a label, which becomes its aria-label.
• ​
  Two breadcrumbs on one page need distinct labels; duplicate landmark names are an accessibility violation.
• ​
  The crumbs are an ordered list, so assistive technology announces position and total.
• ​
  By default the crumb marked isCurrent carries aria-current="page" and is not focusable. It is plain text rather than a disabled link, so it is skipped in the tab order.
• ​
  Truncation is visual only. The full label stays in the DOM, so it remains the crumb's accessible name and can still be selected and copied.

API reference#

Breadcrumb.Root#

Breadcrumb.List#

Breadcrumb.Item#