Breadcrumbs

The Breadcrumbs component provides a navigational hierarchy for users to track and traverse their location within an application.

Usage & Examples

Default

default.tsx
<Breadcrumbs items={[{ label: "Home", href: "/" }, { label: "Library", href: "/docs/components" }, { label: "Data", href: "/docs/components/datatable" }]} />

Truncated

truncated.tsx

<Breadcrumbs
        items={[
          { label: "Docs", href: "/docs" },
          { label: "Components", href: "/docs/components" },
          { label: "Data Table", href: "/docs/components/datatable" },
          { label: "Final Page" },
        ]}
        maxVisible={3}
      />

Props API

17 props
Columns
Breadcrumbs props API
Default
Description
aria-describedbystringNoaria—Optional ID of another element that describes this breadcrumb navigation.
aria-labelstringNoaria"Breadcrumbs"Accessible label for the breadcrumb navigation. Defaults to "Breadcrumbs".
aria-labelledbystringNoaria—Optional ID of another element that labels this breadcrumb navigation. Prefer this when a visible heading already exists.
classNamestringNostyling—Additional class name for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseDisables interaction and styles as disabled.
glassbooleanNopropsconfigured default glass setting (fallback: false)Applies a translucent frosted-glass treatment using the active theme palette.
itemsBreadcrumb[]Yesprops—An array of breadcrumb items.
maxVisiblenumberNoprops—Maximum number of visible items before collapsing into an ellipsis.
outlinebooleanNostylingconfigured default outline setting (fallback: false)Whether to use the outline style.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding style to apply to the breadcrumbs ('none' | 'small' | 'medium' | 'large' | 'full').
separatorReactNodeNoprops—Optional custom separator node between breadcrumb items. Defaults to a right chevron icon.