Skip to content



Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. 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

To use Breadcrumb with react-router or react-router-dom, pass as={NavLink} and omit the selected prop. This ensures that the NavLink gets activeClassName='selected'

Default example

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

Breadcrumb and Breadcrumb.Item components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

The Breadcrumb component does not receive any additional props besides COMMON system props.

Prop nameTypeDefaultDescription
asStringaSets the HTML tag for the component
hrefStringURL to be used for the Link
selectedBooleanfalseUsed to style the link as selected or unselected
Edit this page on GitHub
4 contributorscolebemisVanAndersonemplumsbvkimball
Last edited by colebemis on August 25, 2021