Breadcrumb

Three-Level Breadcrumb

Import

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@mikenotthepope/substrateui"

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   ├── BreadcrumbLink
    │   └── BreadcrumbPage
    └── BreadcrumbSeparator

Direction

The default chevron separator flips automatically in RTL so it points in reading direction. If you pass a custom separator, make sure its glyph also respects direction — a "/" is direction-neutral, but an arrow is not.

Labels

The nav's own accessible name and the ellipsis both live here, and neither has visible text to fall back on. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's breadcrumb key — the provider is how you translate the set once instead of at each call site.

API Reference