Skip to contentSkip to navigationSkip to topbar
Figma
Star

Breadcrumb

Version 11.1.1GithubStorybookPeer review pending

A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.

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

Guidelines

Guidelines page anchor

About Breadcrumb

About Breadcrumb page anchor

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.

(warning)

Using Breadcrumb in Console products

If you're planning on using Breadcrumbs in a Console product, please read the Console Navigation guidelines(link takes you to an external page)and reach out to the Console team (#help-console-beta). Breadcrumbs will eventually be provided through the navigation framework.

  • 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.

Component preview theme
<Breadcrumb>
<BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
</Breadcrumb>
Breadcrumb with unlinked page page anchor

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.

Component preview theme
<Breadcrumb>
<BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
<BreadcrumbItem href="#">Active Numbers</BreadcrumbItem>
<BreadcrumbItem>Updates</BreadcrumbItem>
</Breadcrumb>
Breadcrumb with Truncation page anchor

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

Component preview theme
<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>
Breadcrumb with Page Heading page anchor

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

Component preview theme
<Box>
<Breadcrumb>
<BreadcrumbItem href="#">Phone Numbers</BreadcrumbItem>
</Breadcrumb>
<Heading as="h2" variant="heading20">My phone number</Heading>
</Box>
Breadcrumb with a router page anchor

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.

Do

Add a slash between two BreadcrumbItems.

Don't

Don't add a trailing slash.

Do

Use Breadcrumbs to show the navigation trail leading to the current page.

Don't

Do not include the current page in the navigation trail, unless the current page doesn't have a header.