# Header.

## Übersicht

### Was macht die Komponente?

- Die Komponente dient zur Orientierung und Navigation.

### Wann soll die Komponente eingesetzt werden?

- Die Komponente erscheint auf jeder Seite direkt unter der Status Bar.

### Regeln

- Der Header besteht aus Titel, Signet und optional einem [Toggle](https://digital.sbb.ch/de/design-system/mobile/components/segmented-button/) oder dem Navigationsicon («Pfeil links»).
- Der «Pfeil links» navigiert zurück auf die vorhergehende Seite.
- Der [Toggle](https://digital.sbb.ch/de/design-system/mobile/components/segmented-button/) navigiert zwischen zwei oder drei Tabs.
- Titel beschreibt den Inhalt der Funktion/Seite.

## Varianten

### Varianten

- ohne Navigation, mit Icon (Chevron) mit Text (Abbrechen)
- iOS und Android
- Grösse: Default/Small
- mit und ohne Toggle

#### ohne Navigation

##### Default

![Darstellung des Headers ohne Navigation](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-light.webp "Header ohne Navigation")

![Darstellung des Headers ohne Navigation](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-dark.webp "Header ohne Navigation")

##### Default mit Toggle

![Darstellung des Headers ohne Navigation mit Toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-mit-toggle-light.webp "Header ohne Navigation mit Toggle")

![Darstellung des Headers ohne Navigation mit Toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-mit-toggle-dark.webp "Header ohne Navigation mit Toggle")

##### Small

![Darstellung des Headers ohne Navigation, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-light.webp "Header ohne Navigation, small")

![Darstellung des Headers ohne Navigation, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-dark.webp "Header ohne Navigation, small")

##### Small mit Toggle

![Darstellung des Headers ohne Navigation mit Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-mit-toggle-light.webp "Header ohne Navigation mit Toggle, small")

![Darstellung des Headers ohne Navigation mit Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-mit-toggle-dark.webp "Header ohne Navigation mit Toggle, small")

#### mit Back-Icon

##### Default

![Darstellung des Headers mit Back-Icon](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-light.webp "Header mit Back-Icon")

![Darstellung des Headers mit Back-Icon](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-dark.webp "Header mit Back-Icon")

##### Default mit Toggle

![Darstellung des Headers mit Back-Icon und Toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-mit-toggle-light.webp "Header mit Back-Icon und Toggle")

![Darstellung des Headers mit Back-Icon und Toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-mit-toggle-dark.webp "Header mit Back-Icon und Toggle")

##### Small

![Darstellung Headers mit Back-Icon, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-light.webp "Header mit Back-Icon, small")

![Darstellung Headers mit Back-Icon, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-dark.webp "Header mit Back-Icon, small")

##### Small mit Toggle

![Darstellung Headers mit Back-Icon und Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-mit-toggle-light.webp "Header mit Back-Icon und Toggle, small")

![Darstellung Headers mit Back-Icon und Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-mit-toggle-dark.webp "Header mit Back-Icon und Toggle, small")

#### Mit Text (Abbrechen)

##### Default

![Darstellung Headers mit Text](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-light.webp "Header mit Text")

![Darstellung Headers mit Text](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-dark.webp "Header mit Text")

##### Default mit Toggle

![Darstellung des Headers mit Text und Toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-mit-toggle-light.webp "Header mit Text und Toggle")

![Darstellung des Headers mit Text und Toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-mit-toggle-dark.webp "Header mit Text und Toggle")

##### Small

![Darstellung Headers mit Text, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-light.webp "Header mit Text, small")

![Darstellung Headers mit Text, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-dark.webp "Header mit Text, small")

##### Small mit Toggle

![Darstellung Headers mit Text und Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-mit-toggle-light.webp "Header mit Text und Toggle, small")

![Darstellung Headers mit Text und Toggle, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-mit-toggle-dark.webp "Header mit Text und Toggle, small")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=42-4484&t=OQ7s4wE6eWI2fLGh-1)

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/header/