# Tabbar.

## 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 at the bottom of the screen.

### Rules

- The tabbar navigates between the tabs.
- Each tab is mapped with an icon and a label in the tabbar.
- The tab labels are always single-line.

## Variants

### Variants

#### Default

![Darstellung der Tabbar](https://digital.sbb.ch/assets/images/mobile/tabbar-light.webp "Darstellung der Tabbar")

![Darstellung der Tabbar](https://digital.sbb.ch/assets/images/mobile/tabbar-dark.webp "Darstellung der Tabbar")

### Specification

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

---

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