Skip to end of banner
Go to start of banner

Breadcrumbs

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 18 Next »

Description

Breadcrumbs should be used as a secondary navigational aid. They indicate the current page’s location within a hierarchy and help the user to understand where they are in relation to the rest of that hierarchy.

Breadcrumbs enable users to move quickly up to a parent-level page or previous step.

Usage & Behavior

Breadcrumbs are very effective in products that have a large amount of content organized in a hierarchy of more than two levels.

Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation.

The breadcrumbs component should include:

  • The page hierarchy (path) in regular text, with > as a divider between levels.

  • The user’s current page at the end of the row in plain text.

  • The other (parent) pages in the hierarchy as Text links.

  • When a breadcrumb line exceeds the page width truncation should occur at the 2nd level of the breadcrumb, and move upward if necessary, while always keeping the first and last levels.

  • The breadcrumb should be positioned at the top of the page, below the masthead or above the main header.

  • The breadcrumb can only expand across 1 row of text. Truncation should occur when reaching the right border of the page.

  • The breadcrumb hierarchy links should behave as Text links.

  • The user’s current page at the end of the row should be plain text (no link).

  • Every click on a link in the breadcrumb will navigate to higher level pages within that hierarchy.

Use:

  • Use breadcrumbs as secondary navigation.

  • Breadcrumbs should be used when there are 2 or more linear levels to a page hierarchy.

Don’t use:

  • Breadcrumbs should never entirely replace the primary navigation.

  • Do not use the breadcrumbs component on pages with a flat structure (1 level).

  • Do not use breadcrumbs to show progress through a linear journey. They should only represent page hierarchy.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link

Screen thumbnail

https://zpl.io/2p6Nxrj

Code

<<a box containing the code - discuss with Femi>>

  • No labels