Breadcrumbs

When to use

Breadcrumbs show where the current page sits in the hierarchy and let users return to a higher level in one click. Use them in structures with three or more levels, such as settings pages and nested record screens.

When not to use

• For main navigation: Primary navigation between pages belongs in the sidebar (AppShell).
• For sections of the same page: Use Tabs to switch between sections.
• In single-level structures: With no parent page the trail tells the user nothing; leave it out.
• For sequential steps: Use a Stepper when the order of steps matters.

Anatomy

1. Home
2. First level
3. Current page

First level

LightDark

Copy code

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>
  );
}

1. Navigation landmark (nav): Named with aria-label; the default name is “Breadcrumb”.
2. Item: One entry in the ordered list; every item except the first has a separator before it.
3. Separator: A right-pointing chevron; hidden from screen readers and mirrored in right-to-left languages.
4. Link: The Link component (standalone, sm).
5. Current page: Plain text without a link; carries aria-current="page".
6. Collapse button: A “…” button that stands in for the hidden middle items of a long trail.

Behaviour

• items run from the top level to the current page; the last item is the current page.
• When the item count passes maxItems, the first item, the “…” button and the last maxItems - 1 items are shown.
• The “…” button expands the trail in place without opening a menu. The new items enter with a short fade and a 4 px rise, focus moves to the first revealed link, and the button disappears.
• Below 640 px only a link to the parent page is shown, with a left-pointing chevron before it. The full trail is hidden.
• Links check href; unsafe schemes such as javascript: are removed.
• Pass render to use a router link.

Guidelines

• Keep labels the same as the page titles, so users do not see two names for one page.
• Pass the whole trail. Do not skip middle levels yourself; leave folding to the component.
• Do not give the last item an href; the current page is not a link.
• Place the trail above the page title and use one per page.
• Do not shorten long labels; for now they wrap onto several lines.

Content

• Labels are page names; do not use verbs and do not end with a full stop.
• Do not type the separator (/, >) in the text; the component adds it.

Turkish	English
Ana sayfa	Home
Birinci düzey	First level
Geçerli sayfa	Current page
Konum	Breadcrumb
Gizlenen konumları göster	Show hidden locations

Related components

• Link: The basis of the links in the trail.
• PageHeader: Holds the trail together with the page title.
• Tabs: Switch between sections of the same page.