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

Sortable data table
Prop	Type	Default	Description
items	{ label: string; href?: string }[]	-	Array of breadcrumb items, each with label and optional path. Example: [{ label: 'Home', href: '/' }].
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color of the breadcrumbs.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Rounding of the breadcrumb container or capsules.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow intensity for the breadcrumbs.
state	"" \| "success" \| "error" \| "warning"	-	Visual state for the breadcrumb (success, error, warning).
separator	ReactNode	-	Custom separator element between breadcrumbs. Usually an icon or character.
disabled	boolean	false	If true, disables all breadcrumb links.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the breadcrumb items.
outline	boolean	false	If true, displays breadcrumbs with outline style.
maxVisible	number	-	Maximum number of breadcrumbs to display before collapsing into an ellipsis.
className	string	-	Custom CSS class for the breadcrumb container.
data-testid	string	breadcrumbs	Test ID for test automation.