Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout

Breadcrumbs

The breadcrumbs component displays the current page or context within the site, allowing them to navigate different levels of the hierarchy.

On this page
On this page
An image of the breadcrumb component

Usage

Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to pages higher up in the ancestry.

Breadcrumbs are most appropriate on pages that:

  • Are many levels deep on a site
  • Do not have a section-level navigation
  • May need the ability to quickly go back to the previous (parent) page
  • All items must contain links, with the last item as the user's current context

Anatomy

Breadcrumbs are made of links (indicating parents), dividers, and the current page. The default Breadcrumb component can be modified to change the number of items within the chain.

An image showing the anatomy of the breacrumb component

Note: The space between items is set to 0px as the divider has padding built into it.

Options

Breadcrumb length

By default the Breadcrumb component can show up to 10 items within the chain.

An image showing various breadcrumbs with different numbers of items in the breadcrumb chain
Edit this page on GitHub
1 contributorcolebemis
Last edited by colebemis on February 21, 2023