Skip to main content

Breadcrumbs

The Breadcrumbs component creates a horizontal list of links, truncating the list to fit on a single line.

Polymorphic Component

By default, content is rendered inside a <nav>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples​

Basic Breadcrumbs​

(Resize the box to see the breadcrumbs collapse.)
<Breadcrumbs>
  <Breadcrumb href="./">Home</Breadcrumb>
  <Breadcrumb href="./category">Category</Breadcrumb>
  <Breadcrumb href="./category/child">Child Page</Breadcrumb>
  <Breadcrumb>
    Another Child Page
  </Breadcrumb>
</Breadcrumbs>

Props​