Component

Breadcrumb

Accessible navigation trail showing the current page location within a hierarchy.

Usage

Use breadcrumbs on pages deeper than 2 levels. The last item is always the current page and not a link.

Playground

Preview

Configure

Code

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Do

  • Keep each label short, 1 to 3 words
  • Always make the last item non-clickable to indicate the current page

Don't

  • Don't show breadcrumbs on top-level pages
  • Don't truncate mid-path, truncate from the beginning if space is limited