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 & Behaviour

...

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

Structure

The breadcrumbs component should include:

...

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

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

• The other links (parent) pages in the breadcrumb should behave hierarchy as text links.

• When a breadcrumbs breadcrumb line exceed 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.

...

Placement and Positioning

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

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

States

• The Breadcrumb Hierarchy 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).

Interaction

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

Best practices

Use:

• Use Breadcrumbs 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 (one level), or to show progress through a linear journey.

...