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

16 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.
itemsBreadcrumb[]Yesprops—An array of breadcrumb items.
maxVisiblenumberNoprops—Maximum number of visible items before collapsing into an ellipsis.
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.
shadowShadowTypeNostyling—Shadow style to apply to the breadcrumbs ('none' | 'light' | 'medium' | 'strong' | 'intense').
sizeSizeTypeNostylingconfigured default size (fallback: "medium")Size of the breadcrumbs ('xs' | 'small' | 'medium' | 'large' | 'xl').