# Header.

## Overview

### What does the component do?

- The component is used for orientation and navigation.

### When should the component be used?

- The component appears on every page directly beneath the status bar.

### Rules

- The header consists of title, signet and optionally a [toggle](https://digital.sbb.ch/en/design-system/mobile/components/segmented-button/) or the navigation icon ("left arrow").
- The "left arrow" navigates back to the previous page.
- The [toggle](https://digital.sbb.ch/en/design-system/mobile/components/segmented-button/) navigates between two or three tabs.
- Title describes the content of the function/page.

## Variants

### Variants

- without navigation, with icon (Chevron) with text (Cancel)
- iOS and android
- Size: default/small
- with and without toggle

#### without navigation

#### Default

![Image of the header without navigation, default](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-light.webp "Header without navigation, default")

![Image of the header without navigation, default](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-dark.webp "Header without navigation, default")

#### Default with toggle

![Image of the header without navigation, with toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-mit-toggle-light.webp "Header without navigation, with toggle")

![Image of the header without navigation, with toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-default-mit-toggle-dark.webp "Header without navigation, with toggle")

#### Small

![Image of the header without navigation, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-light.webp "Header without navigation, small")

![Image of the header without navigation, small](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-dark.webp "Header without navigation, small")

#### Small with toggle

![Image of the header without navigation, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-mit-toggle-light.webp "Header without navigation, small with toggle")

![Image of the header without navigation, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-ohne-navigation-small-mit-toggle-dark.webp "Header without navigation, small with toggle")

#### with icon

#### Default

![Image of the header with icon, default](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-light.webp "Header with icon, default")

![Image of the header with icon, default](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-dark.webp "Header with icon, default")

#### Default with toggle

![Image of the header with icon, with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-mit-toggle-light.webp "Header with icon, with toggle")

![Image of the header with icon, with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-default-mit-toggle-dark.webp "Header with icon, with toggle")

#### Small

![Image of the header with icon, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-light.webp "Header with icon, small")

![Image of the header with icon, small](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-dark.webp "Header with icon, small")

#### Small with toggle

![Image of the header with icon, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-mit-toggle-light.webp "Header with icon, small with toggle")

![Image of the header with icon, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-icon-small-mit-toggle-dark.webp "Header with icon, small with toggle")

#### with text

#### Default

![Image of the header with text, default](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-light.webp "Header with text, default")

![Image of the header with text, default](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-dark.webp "Header with text, default")

#### Default with toggle

![Image of the header with text, default with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-mit-toggle-light.webp "Header with text, default with toggle")

![Image of the header with text, default with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-default-mit-toggle-dark.webp "Header with text, default with toggle")

#### Small

![Image of the header with text, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-light.webp "Header with text, small")

![Image of the header with text, small](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-dark.webp "Header with text, small")

#### Small with toggle

![Image of the header with text, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-mit-toggle-light.webp "Header with text, small with toggle")

![Image of the header with text, small with toggle](https://digital.sbb.ch/assets/images/mobile/header-mit-text-small-mit-toggle-dark.webp "Header with text, small with toggle")

### Specification

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

---

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