Breadcrumb

A navigational aid that shows the user their current location within a hierarchy. Helps users understand context and navigate back up.

Three-Level Breadcrumb

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Profile</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Direction

The default chevron separator flips automatically in RTL so it points in reading direction. If you pass a custom separator, make sure its glyph also respects direction — a "/" is direction-neutral, but an arrow is not.

API Reference

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply to the breadcrumb container.