# Breadcrumb

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element mit optionaler Gruppierung
- Kategorien: Navigation
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/breadcrumb/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-breadcrumb--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/breadcrumb/overview (API: https://lyne-angular.app.sbb.ch/angular/components/breadcrumb/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-15
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/breadcrumb

## Elemente

- `sbb-breadcrumb`, mehrere lassen sich zusammenfassen mit `sbb-breadcrumb-group`: It displays a link to a page; used within a `sbb-breadcrumb-group` it can display the path to the current page.

## Übersicht

### Was macht die Komponente?
Eine Breadcrumb-Group ist eine Navigationshilfe. Sie zeigt den Nutzenden, wo sie sich in der Hierarchie einer Website befinden, und ermöglicht den Sprung zu übergeordneten Seiten.

### Wann soll die Komponente eingesetzt werden?
* Um den aktuellen Standort innerhalb der Website-Struktur zu verdeutlichen.
* Um die Navigation auf Seiten mit tiefen Hierarchien zu erleichtern.

### Regeln.
* Die Breadcrumb-Group beginnt immer bei der Startseite und zeigt den vollständigen Pfad bis zur aktuellen Seite.
* Die Ebenen sind klar und verständlich beschriftet.
* Sie zeigt nicht mehr als 5–7 Ebenen. Bei zu wenig Platz werden nur die erste und die letzte Ebene angezeigt, dazwischen steht «…». Ein Klick darauf zeigt wieder alle Ebenen.
* Die erste Ebene (Startseite) wird nur mit einem Icon dargestellt.
* Die Breadcrumb-Group braucht ein `aria-label`, das ihren Kontext beschreibt. Die aktuelle Seite wird automatisch für Screenreader markiert.

## Implementation (Web Components, Englisch)

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)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a) element.

```html
<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.

```html
<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`).

```html
<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 (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/breadcrumb/api.md