Breadcrumb. Overview

Preview.

Fahrplan Verbindungen

What does the component do?

A breadcrumb group is a navigation aid. It shows users where they are within the hierarchy of a website and allows them to jump to higher-level pages.

When should the component be used?

  • To show the current location within the website structure.
  • To make navigation easier on pages with deep hierarchies.
 Usage

Rules.

  • The breadcrumb group always starts at the home page and shows the complete path to the current page.
  • The individual levels are labelled clearly and understandably.
  • It shows no more than 5–7 levels. If there is not enough space, only the first and the last level are shown with "…" in between. Clicking it shows all levels again.
  • The first level (home page) is displayed with an icon only.
  • The breadcrumb group needs an aria-label describing its context. The current page is automatically marked for screen readers.

Elements.

Several sbb-breadcrumb can be combined with sbb-breadcrumb-group.

Specification.

Open in Figma
Examples Default.
Try it out on Storybook Show HTML
Collapsed State.
Try it out on Storybook Show HTML
Breadcrumb.
Try it out on Storybook Show HTML
Icon.
Try it out on Storybook Show HTML
Icon And Text.
Try it out on Storybook Show HTML
Slotted Icon And Text.
Try it out on Storybook Show HTML
Long Content.
Try it out on Storybook Show HTML
No Link.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

The <sbb-breadcrumb> and <sbb-breadcrumb-group> components are meant to represent the hierarchy of visited pages before arriving to the current one.

The <sbb-breadcrumb> is equivalent to a native anchor (a) element.

<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>
Slots.

For the <sbb-breadcrumb> it is possible to provide a text via an unnamed slot; the component can optionally display a <sbb-icon>
at the component start using the iconName property or via custom content using the icon slot.
Text and icon are not exclusive and can be used together.

<sbb-breadcrumb href="/contact">Contact us</sbb-breadcrumb>

<sbb-breadcrumb href="/book-your-trip" icon-name="travel-backpack-medium"></sbb-breadcrumb>

<sbb-breadcrumb href="/info">
  Info
  <sbb-icon slot="icon" name="circle-information-small"></sbb-icon>
</sbb-breadcrumb>

It's possible to set all the link related properties (download, href, rel and target).

<sbb-breadcrumb href="/info" target="_blank" rel="help">Info</sbb-breadcrumb>
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.

The accessibility-current property should be used to make the breadcrumb read correctly by screen-readers when the component
is used in the <sbb-breadcrumb-group>.

By default, the <sbb-breadcrumb-group> component sets accessibility-current="page" on the last slotted <sbb-breadcrumb>.

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 accessibility-current="page".

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbBreadcrumbElement, sbb-breadcrumb.

Properties.

Name Attribute Privacy Type Default Description
accessibilityCurrent accessibility-current public string '' This will be forwarded as aria-current to the inner anchor element.
accessibilityLabel accessibility-label public string '' This will be forwarded as aria-label to the inner anchor element.
download download public boolean false Whether the browser will show the download dialog on click.
href href public string '' The href value you want to link to.
iconName icon-name public string '' The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
rel rel public string '' The relationship of the linked URL as space-separated link types.
target target public '_blank' | '_self' | '_parent' | '_top' | string '' Where to display the linked URL.

Slots.

Name Description
Use the unnamed slot to add content to the breadcrumb.
icon Use this to display an icon as breadcrumb.

class: SbbBreadcrumbGroupElement, sbb-breadcrumb-group.

Slots.

Name Description
Use the unnamed slot to add sbb-breadcrumb elements.