Breadcrumbs

Navigation landmark that displays a trail of breadcrumb links.

Examples

Default

1. /Home
2. /Projects
3. /Silver
4. /Settings

<Breadcrumbs>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
  <BreadcrumbItem href="/projects/silver">Silver</BreadcrumbItem>
  <BreadcrumbItem isCurrent>Settings</BreadcrumbItem>
</Breadcrumbs>

Custom Separator

1. >Home
2. >Docs
3. >Page

1. Home
2. Docs
3. Page

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <Breadcrumbs separator=">">
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
    <BreadcrumbItem isCurrent>Page</BreadcrumbItem>
  </Breadcrumbs>
  <Breadcrumbs
    separator={<Icon color="secondary" icon={ChevronRight} size="sm" />}>
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
    <BreadcrumbItem isCurrent>Page</BreadcrumbItem>
  </Breadcrumbs>
</div>

Supporting Variant

1. /Home
2. /Default

1. /Home
2. /Supporting

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <Breadcrumbs>
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem isCurrent>Default</BreadcrumbItem>
  </Breadcrumbs>
  <Breadcrumbs variant="supporting">
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem isCurrent>Supporting</BreadcrumbItem>
  </Breadcrumbs>
</div>

With Icons

1. /Home
2. /Projects
3. /Settings

<Breadcrumbs>
  <BreadcrumbItem href="/" startIcon={Home}>
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
  <BreadcrumbItem isCurrent>Settings</BreadcrumbItem>
</Breadcrumbs>

Button Items

1. /Home
2. /Projects
3. /Current

<Breadcrumbs>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem onClick={() => undefined}>Projects</BreadcrumbItem>
  <BreadcrumbItem isCurrent>Current</BreadcrumbItem>
</Breadcrumbs>

Long Trail

1. /Home
2. /Organization
3. /Team
4. /Projects
5. /Silver
6. /Settings
7. /Permissions

<Breadcrumbs>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/org">Organization</BreadcrumbItem>
  <BreadcrumbItem href="/org/team">Team</BreadcrumbItem>
  <BreadcrumbItem href="/org/team/projects">Projects</BreadcrumbItem>
  <BreadcrumbItem href="/org/team/projects/silver">Silver</BreadcrumbItem>
  <BreadcrumbItem href="/org/team/projects/silver/settings">
    Settings
  </BreadcrumbItem>
  <BreadcrumbItem isCurrent>Permissions</BreadcrumbItem>
</Breadcrumbs>

API

Breadcrumbs

Navigation landmark that displays a trail of breadcrumb links.

Prop	Type	Default	Description
children*	ReactNode	—	BreadcrumbItem children.
className	string	—	Additional CSS class names applied to the nav element.
data-testid	string	—	Test ID applied to the nav element.
label	string	'Breadcrumb'	Accessible label for the navigation landmark.
ref	Ref<HTMLElement>	—	Ref forwarded to the nav element.
separator	ReactNode	'/'	Separator rendered between items.
style	CSSProperties	—	Inline styles applied to the nav element.
variant	"default" | "supporting"	'default'	Visual text variant.

BreadcrumbItem

A single item in a breadcrumb trail, rendered as a link, button, or static text depending on the props provided.

Prop	Type	Default	Description
as	LinkComponent	—	Custom link component used when href is set.
children*	ReactNode	—	Breadcrumb label content.
className	string	—	Additional CSS class names applied to the list item.
data-testid	string	—	Test ID applied to the list item.
href	string	—	Link destination. Omit for the current page.
isCurrent	boolean	—	Whether this item represents the current page.
onClick	(event: MouseEvent<HTMLElement>) => void	—	Click handler for link or button items.
ref	Ref<HTMLLIElement>	—	Ref forwarded to the list item.
startIcon	IconComponent	—	Icon rendered before the label.
style	CSSProperties	—	Inline styles applied to the list item.