Breadcrumb

New

Overview

A breadcrumb trail of links and current-page text that shows a page within a site hierarchy.

Breadcrumb renders a labeled nav landmark containing an ol . The final item is marked as the current page automatically. Omit its destination to render it as text, or provide one to keep it linked.

HEEx

<Breadcrumb.breadcrumb>
  <:item navigate="/">Home</:item>
  <:item navigate="/docs/installation">Documentation</:item>
  <:item>Breadcrumb</:item>
</Breadcrumb.breadcrumb>

Accessibility

The nav landmark has an accessible name, and the ordered list preserves the page hierarchy. Visual separators are hidden from assistive technology. The final item receives aria-current="page".

References

Add this module

terminal

mix dizzy.add breadcrumb

Component API

Breadcrumb.breadcrumb

Attributes

Attributes for Breadcrumb.breadcrumb
Name	Type	Default	Values
`class`	`:any`	nil	—
`label`	`:string`	"Breadcrumb"	—
`rest`	`:global`	nil	—

Slots

Slots for Breadcrumb.breadcrumb
Name	Required
`item`	Required

Item slot attributes

Attributes for the item slot in Breadcrumb.breadcrumb
Name	Type	Default	Values
`navigate`	`:string`	nil	—
`patch`	`:string`	nil	—
`href`	`:any`	nil	—
`class`	`:any`	nil	—