Bugcrowd Design System

Bugcrowd Design System

Search/

Breadcrumbs

Last modified:

A navigational aid which displays the location a user is on within a website’s structure.

Example of Breadcrumbs - default

<nav class="bc-breadcrumbs" aria-label="Breadcrumb navigation">
  <ol class="bc-list bc-list--inline bc-list--compact">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Parent</a>
    </li>
    <li>Current page</li>
  </ol>
</nav>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Breadcrumbs show users where they are in the website hierarchy and how to navigate back/up to previous levels or content. They are best positioned within the page’s primary <header> element, when possible.

Breadcrumbs should sit between the primary navigation and the page title.

The breadcrumb container class should be applied on a <nav>, wrapping the list and its items.

  • Use the --compact and --inline List component for the list styles.

Design

Last modified:

Visually, breadcrumbs should remain in proximity to primary navigation elements and the page title.

Use the .bc-list--compact and .bc-list--inline variants from the List component for the list styles.

Accessibility

Last modified:

  • Provide the <nav> with an aria-label (eg “Breadcrumb navigation”).
  • The last link in the set represents the current page.
  • Use ordered lists (<ol>).

Rationale

Last modified:

The endpoints linked and their order should reflect the hierarchy of the website. That is, the current page a user is on should be the child of a page it was navigable from.

Do not compose breadcrumbs dynamically from a user’s browsing/path history.

Do not make the final breadcrumb --- the current page --- an anchor. This is to avoid confusion given it would link to the page the user is already on. An alternative would be to use an anchor in conjunction with aria-current="page", however this may still cause confusion.

Do not use breadcrumbs on the top-level page where there would only be the one item, eg the homepage.

See also

Last modified:

  • List (Component)