Skip to main content

Breadcrumbs

Renders an ordered list of links which represent a hierarchy of pages. Conforms to the WAI-ARIA breadcrumb pattern.

<BreadcrumbsItem> can be wrapped in framework-specific links if required, e.g. with Next:

<NextLink href="/item" passHref>
    <BreadcrumbsItem>Item</BreadcrumbsItem>
</NextLink>

Examples

Breadcrumbs

View standalone
Code
<Breadcrumbs aria-label="Breadcrumbs">
  <BreadcrumbsItem href="/">
    Home
  </BreadcrumbsItem>
  <BreadcrumbsItem href="/physicians">
    Physicians
  </BreadcrumbsItem>
  <BreadcrumbsItem href="/physicians/solutions">
    Solution
  </BreadcrumbsItem>
  <BreadcrumbsItem
    href="/physicians/solutions/verylong"
    selected
  >
    Elsevier introduces geographical pricing pilot to support authors in low and middle-income countries with equitable open access publishing options
  </BreadcrumbsItem>
</Breadcrumbs>

Props

Breadcrumbs
BreadcrumbsItem

selected

boolean

Indicates whether the item is the currently selected page.

Default: false