Breadcrumb

Breadcrumb shows where the user is in a hierarchical structure — Home → Products → Design System → Button. Each crumb (except the last) is a link back up the tree; the last is plain text marked as the current page.

For sibling navigation between sections, use TabBar. For flat top-level nav, use TopNavigation or SidebarNavigation.

Use it for

• Page headers in apps with hierarchical navigation
• Settings page section position
• Documentation site current-location markers
• Any place users benefit from "where am I" + "how do I go up"

Import

import { Breadcrumb } from '@brikdesigns/bds';

Variants

Slash separator

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Design System' },
  ]}
/>

Chevron separator

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Settings', href: '/settings' },
    { label: 'Profile' },
  ]}
  separator="chevron"
/>

Deep nesting

For 5+ level hierarchies, consider truncating with an ellipsis or root-only fallback — Breadcrumb itself doesn't auto-truncate; the consumer trims items before passing.

<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: '…', href: '/clients' },
    { label: 'Acme Co', href: '/clients/acme' },
    { label: 'Engagements', href: '/clients/acme/engagements' },
    { label: 'Brand Refresh' },
  ]}
/>

Service-line cascade

When a breadcrumb sits inside a [data-service-line='X'] subtree, the current-page label and separators rebind canonical --text-secondary and --text-muted to the matching --text-service-{name} value (brand, marketing, information, product, and service → back-office).

The component itself stays scope-blind — only the cascade block in Breadcrumb.css knows about service lines. Consumers set data-service-line on any ancestor (page wrapper, hero card, sidebar column) and the breadcrumb inside picks up the hue. The legacy data-audience attribute still resolves during the deprecation window (#788).

<div data-service-line="marketing">
  <Breadcrumb items={[
    { label: 'Services', href: '/services' },
    { label: 'Website Design' },
  ]} />
</div>

When not to use

• Don't use Breadcrumb when there's no hierarchy. Single-level apps don't benefit — drop the trail entirely.
• Don't use Breadcrumb as primary navigation. It's a contextual aid, not a nav bar. Use TopNavigation / SidebarNavigation for primary nav.
• Don't make the last item a link. It represents the current page; clicking it would reload to itself.

Accessibility

• Renders a <nav aria-label="Breadcrumb"> element.
• The last item carries aria-current="page" and renders as plain text — not a link.
• Earlier items render as <a> when href is set.
• Separators are decorative (aria-hidden).

API

Plus standard <nav> HTML attributes.

BreadcrumbItem

interface BreadcrumbItem {
  label: ReactNode;
  href?: string;
}

Related

• TabBar — sibling-section navigation
• TopNavigation — top-level primary nav
• SidebarNavigation — vertical primary nav
• Storybook playground