Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Default

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

Separator Styles

Use the separator prop to change the separator between items. Available options are chevron (default) and slash.

Chevron Separator

Slash Separator

External Links

Use the href attribute for external URLs.

External Link

Accessibility

The breadcrumb component includes proper ARIA attributes for accessibility:

Uses semantic <nav> element with aria-label="Breadcrumb"
Uses ordered list for semantic structure
Current page marked with aria-current="page"
Separator icons hidden from screen readers