Was macht die Komponente?
Eine Breadcrumb-Group ist eine Navigationshilfe, die Nutzenden zeigen, wo sie sich innerhalb der Hierarchie einer Website befinden, und ermöglicht das einfache Zurückspringen zu übergeordneten Seiten.
Wann soll die Komponente eingesetzt werden?
- Um dem Nutzenden den aktuellen Standort innerhalb der Website-Struktur zu verdeutlichen.
- Um eine einfache Navigation zwischen den Ebenen der Website zu ermöglichen.
- Um die Usability auf Seiten mit tiefen Hierarchien zu verbessern.
Regeln
- Eine Breadcrumb-Group soll immer von der Startseite ausgehen und den vollständigen Pfad bis zur aktuellen Seite anzeigen
- Die einzelnen Ebenen in der Breadcrumb-Group sollen klar und verständlich beschriftet sein
- Eine Breadcrumb-Group soll nicht mehr als 5-7 Ebenen anzeigen, um die Übersichtlichkeit zu bewahren
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1a | Komponente | sbb-breadcrumb | Nein | Nur Icon |
| 1b | Komponente | sbb-breadcrumb | Nein | Nur Label |
| 2 | Komponente | 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. |