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
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1a | Component | sbb-breadcrumb | No | Nur Icon |
| 1b | Component | sbb-breadcrumb | No | Nur Label |
| 2 | Component | sbb-icon | - | Dient zur Trennung zweier Breadcrumbs |
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>
Link properties
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".
API Documentation
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 | LinkTargetType | 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. |