Navigation

Breadcrumb

Hierarchical location indicator with separators.

Preview

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@brika/clay/components/breadcrumb';
/** Standard trail with two ancestor links and the current page. */
export default function BreadcrumbDefaultDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

01 Installation

Install

Pull Breadcrumb from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Breadcrumb } from "@brika/clay";

tsxGranular1 line

import { Breadcrumb } from "@brika/clay/components/breadcrumb";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxBreadcrumb.tsx28 lines

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@brika/clay/components/breadcrumb';
/** Standard trail with two ancestor links and the current page. */
export default function BreadcrumbDefaultDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

03 Examples

Breadcrumb, every way

Collapsed

Deep path with middle segments collapsed into an ellipsis indicator.

GitHub

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@brika/clay/components/breadcrumb';
/** Deep path with middle segments collapsed into an ellipsis indicator. */
export default function BreadcrumbCollapsedDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Projects</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Design system</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Custom Separator

Slash character as a separator instead of the default chevron.

GitHub

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@brika/clay/components/breadcrumb';
/** Slash character as a separator instead of the default chevron. */
export default function BreadcrumbCustomSeparatorDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>/</BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>/</BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Analytics</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

04 Accessibility

Accessibility

Root renders <nav aria-label="breadcrumb">, no extra landmark markup needed.
BreadcrumbPage renders aria-current="page" on the last item.
BreadcrumbEllipsis is aria-hidden="true", AT skips the visual indicator.
Separator elements are presentational; AT does not read them.

05 Tokens 4 theme-overridable

Theme tokens

Every CSS variable Breadcrumb reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Breadcrumb without touching component code.

Breadcrumb tokens

4 tokens

ColorFill, border, and text colors.4

--breadcrumb-link-foregroundcolorvar(--muted-foreground)
components.breadcrumb.linkForeground
Resting text color of breadcrumb links and the surrounding list (inactive crumbs).
--breadcrumb-link-hover-foregroundcolorvar(--foreground)
components.breadcrumb.linkHoverForeground
Text color of a breadcrumb link on hover.
--breadcrumb-page-foregroundcolorvar(--foreground)
components.breadcrumb.pageForeground
Text color of the current-page crumb (the last item, marked `aria-current="page"`).
--breadcrumb-separator-colorcolorvar(--muted-foreground)
components.breadcrumb.separatorColor
Color of the separator glyph between breadcrumb items.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.breadcrumb, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "breadcrumb": {
      "linkForeground": "var(--muted-foreground)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-breadcrumb-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Breadcrumb. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

passthrough