Components

Breadcrumbs

A location trail that shows where the current page sits in the hierarchy and folds long trails.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. On a long trail, activate the “…” button and watch the hidden locations open in place.

Live example, StorybookOpen in Storybook

Default

The last item is the current page: it is not a link and carries aria-current="page". The items before it are links with a chevron between them.

import { Breadcrumbs, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Breadcrumbs
        items={[
          { label: 'Home', href: '#home' },
          { label: 'First level', href: '#first' },
          { label: 'Current page' },
        ]}
      />
    </Provider>
  );
}

Collapsed trail

When the item count passes maxItems (default 4), the first item and the last maxItems - 1 items stay visible; the middle ones gather in a “…” button. The button expands the trail in place and focus moves to the first revealed link.

import { Breadcrumbs, Provider } from '@bigbang/ui';

export default function Collapsed() {
  return (
    <Provider locale="en-GB">
      <Breadcrumbs
        maxItems={4}
        items={[
          { label: 'Home', href: '#home' },
          { label: 'First level', href: '#first' },
          { label: 'Second level', href: '#second' },
          { label: 'Third level', href: '#third' },
          { label: 'Fourth level', href: '#fourth' },
          { label: 'Current page' },
        ]}
      />
    </Provider>
  );
}

Custom label

label sets the name of the navigation landmark. The default is “Breadcrumb”; change it when a page has more than one trail or needs more context.

import { Breadcrumbs, Provider } from '@bigbang/ui';

export default function CustomLabel() {
  return (
    <Provider locale="en-GB">
      <Breadcrumbs
        label="Settings location"
        items={[
          { label: 'Home', href: '#home' },
          { label: 'First level', href: '#first' },
          { label: 'Current page' },
        ]}
      />
    </Provider>
  );
}

Light and dark mode

Colours come from the color-fg-* and color-icon-* tokens; neither mode needs extra settings.

import { Breadcrumbs, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Breadcrumbs
        items={[
          { label: 'Home', href: '#home' },
          { label: 'First level', href: '#first' },
          { label: 'Current page' },
        ]}
      />
    </Provider>
  );
}