COMPONENTS

Breadcrumb

Breadcrumbs show users their location during navigation and allow them to easily move up a level or levels in a hierarchy of pages.

Breadcrumbs Intro
Breadcrumb Anatomy
  1. Page title and link
  2. Chevron separator

Breadcrumb has seven states available for breadcrumb items — enabled, hover, active, focus, visited, disabled and read-only.

Breadcrumb States

If a breadcrumb bar will exceed the content width one option is to wrap the full breadcrumb trail to allow overflow to the next line.

Breadcrumb Wrapping

With trail truncation, a maximum of 5 breadcrumb items are shown by default in the breadcrumb trail. If more than five items are required, then the breadcrumb trail truncates to show the first and last items with an ellipsis shown to indicate further items. Clicking the ellipsis expands all items to show the full breadcrumb bar.

Breadcrumb Truncation

Alternatively, truncation can also be customized to collapse before and after a specified item number.

Breadcrumb Truncation Custom

Note: Breadcrumb does not currently support truncation in UI Toolkit. We are working towards releasing this work in a future version.

Long names can be truncated and the length before truncation can be customized. Avoid wrapping individual items onto two lines. When hovering over the truncated breadcrumb a tooltip that contains the full name is displayed.

Breadcrumb Truncation

Breadcrumbs can be displayed in large, medium and small sizes.

Breadcrumb Sizes
  • Use only when the navigation has more than two levels of depth.
  • Use only when it’s necessary to inform users of their location.
  • Place breadcrumbs in the top left corner, typically above the page title.
  • Breadcrumbs are especially useful when users are likely to have landed on the page from an outside source.
  • Show progress from the highest navigation level to the lowest, without skipping a step.
  • Use the exact section names. For example, don’t shorten My Applications to Applications.