Breadcrumb

Composable navigation trail showing the user's location within a hierarchy. Fully accessible with a nav landmark and aria-current on the current page.

Anatomy

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="…">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbEllipsis />       {/* optional — for collapsed items */}
  <BreadcrumbSeparator />
  <BreadcrumbItem current>
    Current page
  </BreadcrumbItem>
</Breadcrumb>

Examples

With ellipsis

Custom separator

Props

Breadcrumb

children*

ReactNode

BreadcrumbItem and BreadcrumbSeparator elements.

label= 'Breadcrumb'

string

Accessible label for the nav landmark.

className

string

Additional classes on the nav element.

Prop	Type	Default	Description
children*	ReactNode	—	BreadcrumbItem and BreadcrumbSeparator elements.
label	string	'Breadcrumb'	Accessible label for the nav landmark.
className	string	—	Additional classes on the nav element.

BreadcrumbItem

children*

ReactNode

Content — typically a BreadcrumbLink or plain text.

current= false

boolean

Marks this as the current page (adds aria-current and foreground colour).

className

string

Additional classes.

Prop	Type	Default	Description
children*	ReactNode	—	Content — typically a BreadcrumbLink or plain text.
current	boolean	false	Marks this as the current page (adds aria-current and foreground colour).
className	string	—	Additional classes.

BreadcrumbLink

children*

ReactNode

Link label.

href

string

Destination URL.

className

string

Additional classes.

Prop	Type	Default	Description
children*	ReactNode	—	Link label.
href	string	—	Destination URL.
className	string	—	Additional classes.

BreadcrumbSeparator

children

ReactNode

Custom separator content. Defaults to a chevron icon.

className

string

Additional classes.

Prop	Type	Default	Description
children	ReactNode	—	Custom separator content. Defaults to a chevron icon.
className	string	—	Additional classes.

PreviousTabs NextNav