What does the component do?

A breadcrumb-group is a navigation help that shows users where they are within the hierarchy of a website and makes it easy to jump back to higher-level pages.

When should the component be used?

• To show the user the current location within the website structure.
• To enable easy navigation between the levels of the website.
• To improve usability on pages with deep hierarchies.

Rules

• A breadcrumb group should always start from the home page and display the complete path to the current page
• The individual levels in the breadcrumb group should be labelled clearly and understandably
• A breadcrumb-group should not display more than 5-7 levels in order to maintain clarity

Child Components

Examples

The sbb-breadcrumb-group component is a container for one or more sbb-breadcrumb,
which are meant to represent the hierarchy of visited pages before arriving to the current one.

<sbb-breadcrumb-group aria-label="You are here:">
  <sbb-breadcrumb href="/" icon-name="house-small"></sbb-breadcrumb>
  <sbb-breadcrumb href="/work-with-us"> Work with us </sbb-breadcrumb>
  <sbb-breadcrumb href="/apply" target="_blank"> Apply </sbb-breadcrumb>
</sbb-breadcrumb-group>

Style

If the width of all the nested sbb-breadcrumb exceeds the container width,
only the first and the last breadcrumb are displayed, and a new one with the ellipsis symbol appears between them.
Clicking on this sbb-breadcrumb will make the ellipsis disappear and will restore the full list
(the action is not reversible).

Accessibility

It is strongly recommended to place an aria-label attribute on the sbb-breadcrumb-group, as in the example above,
to describe what context the breadcrumbs have.
Whenever the sbb-breadcrumb list within the component is loaded or updated,
the last element of the list receives the attribute aria-current="page".

Slots