Brief: Breadcrumbs v. 0.1 [Block]

Breadcrumbs are a secondary navigation component used to show a user's location in a hierarchical structure. They communicate the path a user has taken to the current page and offer a quick way to navigate back up the path.

Use When 

• The users location in a hierarchical structure is a useful piece of information to communicate.

Don’t Use When 

• More appropriate navigation components are available.

  • Never use breadcrumbs to replace the main navigation on a page.

Related/Similar Components 

• Table of contents

• Sitemap Links

Key Content  

Visual Style

Examples

Open

Breadcrumbs on light

Open

Breadcrumbs on dark

Anatomy

Screenshot taken from Figma appears to have no focus state for the dark mode. Needs questioning.

Behaviour 

General:

• The current page is always the last item in the list and breadcrumbs should never display children of the current page unless it’s proximate to the page title (see visibility controls).

• Breadcrumbs should never wrap onto a new line. If the width of the breadcrumbs breaks out of the parent container (or max width), breadcrumbs should adopt the overflow behaviour (see overflow).

• TDB whether breadcrumbs adopt the max with of their parent container or have a specified max width (similar to max with of content)

Overflow:

Without JS:

• Breadcrumbs don’t overflow and instead wrap onto the next line.

With JS:

• When the number of items in the breadcrumb list exceeds the width of its parent container, or specified max width, or specified number of items, breadcrumbs should truncate displaying only the first and last navigation items and a truncation menu button (…).

• The truncation menu displays all options that are no longer visible in the following ways:

  • Option 1

    • The truncation menu displays all options that are no longer visible. Leaving ‘root' and 'current page’

  • Option 2 - If current page is visually hidden (see visibility controls)

    • The truncation menu displays all options that are no longer visible. Leaving ‘root' and the current page’s 'parent page'

  • Items are listed with the hierarchy ordered from top (root) to bottom.

• Overflows are accessed by clicking the overflow button (…) or appropriate keyboard control (see accessibility)

• Overflows are ‘pop-overs'. They site above site content and don’t change/push/interact with any content on the page.

Tabbing:

• When tabbing though the list of links a user is able to tab into the truncation menu as if it were the next item in the list.

• When the user reaches the last item in the list, the next tab will close the list and move focus onto the next item.

Level control:

• A mechanism is needed to control the number of breadcrumb items to display.

Visibility controls:

• A mechanism is needed to control the visibility of the current page’s link. For example if the current page title is repeated as the next element in the page.

  • Note. Controls visibility only - It’s still rendered in the dom.

Editorial 

• Content editors may be given the option to define a ‘short’ version of the page title to be used in some navigational components. If this name has been defined then it should be used instead of the default page title.

Accessibility 

Breadcrumbs must be keyboard friendly with the following behaviours:

*TDB - Discuss esc behaviour in more details

• Breadcrumbs should be wrapped in a nav landmark and marked with aria-label="breadcrumbs"

• Use ol to denote link hierarchy

• add aria-current='location' to the current page link.

Analytics & Data 

• N/A

Future Expansion 

• Currently, breadcrumbs only come in one style but in the future there may be a case where we allow the configuration of the divider style and/or allow icons to be used as links (for example the root link could be a home icon).

• Extending breadcrumbs for structured data as used by search engines to categorise information from the page in search results: How To Add Breadcrumb (BreadcrumbList) Markup | Google Search Central  |  Documentation  |  Google for Developers

Wider Conversations that may impact this 

• N/A

Examples

Useful links

Breadcrumbs - Spectrum

Breadcrumb Component | Adobe Experience Manager

https://atlassian.design/components/breadcrumbs/usage

Accessible Breadcrumbs - example and best practices | Aditus

Useful materials