Breadcrumb

Breadcrumbs are a user interface element that provides users with a hierarchical navigation trail indicating their current location within an app or website.

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various avatar styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<nav
  class="neo-breadcrumbs"
  aria-label="Path to current page"
>
  <div class="neo-breadcrumbs__wrapper">
    <ol>
      <li class="neo-breadcrumbs__link">
        <a href="#parent1">
          First Level Page
        </a>
      </li>
      <li class="neo-breadcrumbs__link neo-breadcrumbs__link--current">
        <a
          href="#current_page"
          aria-current="page"
        >
          Current Page
        </a>
      </li>
    </ol>
  </div>
  <div class="neo-breadcrumbs__actions">
    <button
      class="neo-btn neo-btn--default neo-btn-secondary neo-btn-secondary--default"
      data-badge
    >
      Action 1
    </button>
    <button
      class="neo-btn neo-btn--default neo-btn-primary neo-btn-primary--default"
      data-badge
    >
      Action 2
    </button>
  </div>
</nav>

<Breadcrumbs
  aria-label="Path to current page"
  buttons={[
    <Button key="btn1" variant="secondary">Action 1</Button>,
    <Button key="btn2">Action 2</Button>
  ]}
  currentPageLink={{
    href: '#current_page',
    text: 'Current Page'
  }}
  links={[
    {
      href: '#parent1',
      text: 'First Level Page'
    }
  ]}
/>

There are a number of key elements to correctly display each breadcrumb trail.

• Default First Page:

  This is the top of the hierachy of the present trail. From this page, choices were made that lead to the current location.

• Overflow:

  Where the trail is too long for the given space, intermediate steps in the hierarchy can be bundled together under the overlow icon.

• Child Page:

  The list of pages from the First page that lead to the current location.

• Separator:

  Each child page must be divided from its neighbors by a forward slash separator.

• Current Page:

  The currently displayed page. The breadcrumb trail leads here.

• Truncated Page Title:

  If the current page title is too long for the available space, then it can be trimmed with an ellipsis.

• Buttons (optional):

  Buttons can be added where necessary to provide additional controls.

The Current Page is displayed differently from the First page and all the Child pages.

Enabled

Hover

Current Page

• Enabled:

  This state shows that the link is available to be selected to move to that page. All linkable pages use this state.

• Hover:

  Moving the focus to a link changes it to the Hover state to show that selecting this link will take you to that page.

• Current Page:

  Displays the name of the page currently displayed. This does not need to be a link since the user is already on this page.

Breadcrumbs use the behaviors shown below.

Placement

Breadcrumbs appear at the top of a page, just below the header. They display links to the previous pages and sections the user visited that brought them to the current page.

DO: Always place the breadcrumb on top of the panel above any other elements.

DON'T: Do not place the breadcrumb trail below other elements or at the bottom of a page.

Overflow

When there is not enough space to display all of the pages in the breadcrumb, collapse intermediate items into a dropdown menu. The First Page and the Current Page should always appear in full where space is available.

Truncate

Truncate the current page title when it is too long to display in the space available. Use tooltips to display the full title.

DO: Truncate labels with ellipses (...) when titles are too long to display.

DON'T: Do not wrap breadcrump titles.

Buttons

Buttons associated with breadcrumbs are optional but, when included, should serve a clear and specific purpose, such as allowing users to take an action related to the current page. The buttons should be placed after the links in the breadcrumb, and should be visually distinct from the links.

On pages that have a form, the Save button should be disabled until the user fills in all required fields. Once the necessary fields have been populated, the Save button becomes active and allows users to save the changes.

DO: Add Cancel and Save buttons to pages that include forms or other actions that need to be completed by a user.

DON'T: Do not use Breadcrumb titles without buttons when the user is expected to complete a form or other actions.

Below are the dimensions and padding for the breadcrumb component. The breadcrumb bar is 52 px high. Leave at least 24 px between the end of the Current Page link and the first button.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.