Breadcrumb

<Breadcrumb>
  <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
  <BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
</Breadcrumb>

Breadcrumb navigation helps the user understand their location in an app or website by providing a trail back to the top level of the website.

Breadcrumbs are listed in order and represent the hierarchy of the page in the product. Do not include the current page in the hierarchy unless there is no page header on the current page.

• The Breadcrumb component includes the accessible aria-label="breadcrumb" attribute. Make sure to add the href so the BreadcrumbItem goes to the appropriate location.
• The unlinked BreadcrumbItem includes the accessible aria-current="page" attribute. Head to the Breadcrumb with unlinked page example for more details on when you should use an unlinked BreadcrumbItem.

The Breadcrumb component uses Anchors to link back to parent pages by passing an href to each BreadcrumbItem.

<Breadcrumb>
  <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
  <BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
</Breadcrumb>

Always show the full IA hierarchy of the current page, even if one of the parent pages cannot be navigated to. When a parent page cannot be navigated to, use an unlinked Breadcrumb.

Do not use an unlinked Breadcrumb to display the name of the current page in the Breadcrumb. The current page's header provides a clearer indication to the user of where they are in the product.

To show an unlinked page, use a BreadcrumbItem with no href.

<Breadcrumb>
  <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
  <BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
  <BreadcrumbItem>Updates</BreadcrumbItem>
</Breadcrumb>

Sometimes the text of a breadcrumb can be long. In those situations you can use the Truncate component inside the BreadcrumbItem element.

<Breadcrumb>
  <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
  <BreadcrumbItem href="#">
    <Box as="span" display="inline-flex" maxWidth="size10">
      <Truncate title="Some very long text to truncate">Some very long text to truncate</Truncate>
    </Box>
  </BreadcrumbItem>
  <BreadcrumbItem>Germany Hotline B</BreadcrumbItem>
</Breadcrumb>

You may choose to use a page Heading as the current page in the breadcrumb.

<Box>
  <Breadcrumb>
    <BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
  </Breadcrumb>
  <Heading as="h2" variant="heading20">My phone number</Heading>
</Box>

Using breadcrumb with a router is analogous to using Anchor with a router, since our BreadcrumbItem component creates links using Anchor under the hood.

Keep breadcrumb text short, ideally less than 15 characters. When the linked page has a longer title, follow the truncation guidance.

Do not include the current page in the navigation, since the page header provides a clearer indication to the user of where they are in the product.

• Breadcrumb without href or plain text
• Last separator using Breadcrumb