Skip to main content

Navigation and disclosure

Breadcrumbs

Render hierarchical navigation links for nested docs and application sections. Hansel and Gretel would have loved this component.

Curated demo

Reference

Render hierarchical navigation links for nested docs and application sections. Hansel and Gretel would have loved this component.

  • Use Breadcrumbs for hierarchy rather than tags or filters. It's a trail of digital breadcrumbs so your users don't get lost in the woods.
  • Keep labels literal and concise. 'Home > Products > Shoes' is good. 'Home > Things we sell > Things you put on your feet to walk' is bad.
  • Don't use them on the homepage. You can't go higher than the roof.

Props

Name Type Default Description
items * BreadcrumbItem[] — List of breadcrumb items.
separator string '/' The separator between items.
class string — Additional CSS classes.

Example snippet

<Breadcrumbs items={breadcrumbItems} />