Breadcrumbs

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

Usage

Default

<Breadcrumbs items={[{ label: "Home", href: "/" }, { label: "Library", href: "/library" }, { label: "Data", href: "/library/data" }]} />

Truncated


<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Category", href: "/category" },
    { label: "Subcategory", href: "/category/sub" },
    { label: "Details", href: "/category/sub/details" },
    { label: "Final Page" }
  ]}
  maxVisible={3}
/>

Props

Data table
	Type	Description
aria-describedby	string	Optional ID of another element that describes this breadcrumb navigation.
aria-label	string	Accessible label for the breadcrumb navigation. Defaults to "Breadcrumbs".
aria-labelledby	string	Optional ID of another element that labels this breadcrumb navigation. Prefer this when a visible heading already exists.
className	string	Additional class name for custom styling.
data-testid	string	Optional test ID for testing frameworks.
disabled	boolean	Disables interaction and styles as disabled.
items	Breadcrumb[]	An array of breadcrumb items.
maxVisible	number	Maximum number of visible items before collapsing into an ellipsis.
outline	boolean	Whether to use the outline style.
rounding	RoundingType	Rounding style to apply to the breadcrumbs ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
separator	ReactNode	Optional custom separator node between breadcrumb items. Defaults to a right chevron icon.
shadow	ShadowType	Shadow style to apply to the breadcrumbs ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
size	SizeType	Size of the breadcrumbs ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
state	StateType	State of the breadcrumbs ('success' \| 'error' \| 'warning' \| 'disabled' \| ''). Used for visual feedback.
theme	ThemeType	Theme style to apply to the breadcrumbs ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').