Components

Breadcrumb

Path of clickable segments separated by CaretRight chevrons. Used inside chrome (like TopBar) to show location and let the user navigate up. Compound API: BreadcrumbList + Item + Link + Separator + Page + Ellipsis.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Risk conditions</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">Rules</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>r-005</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

When to use

  • Detail views nested inside a section (Risk conditions › Rules › r-005).
  • Any page where the parent path matters for wayfinding.

When not to use

  • Landing pages with no parent path — use a single title.
  • For step-by-step wizards — use a stepper.

Usage

Do
  • Only the last item gets text-foreground (BreadcrumbPage).
  • Every previous segment should be clickable back to its own list.
Don't
  • Don't nest a dropdown inside a segment.
  • Don't put more than 4 visible segments — collapse with BreadcrumbEllipsis.