---
title: Bottom Navigation React-Komponente
components: BottomNavigation, BottomNavigationAction
---

# Bottom Navigation (Untere Navigation)

<p class="description">Die unteren Navigationsleisten ermöglichen die Bewegung zwischen primären Zielen in einer App.</p>

Die [untere Navigationsleiste](https://material.io/design/components/bottom-navigation.html) zeigt drei bis fünf Ziele am unteren Bildschirmrand an. Jedes Ziel wird durch ein Symbol und eine optionale Textbezeichnung dargestellt. Wenn Sie auf ein unteres Navigationssymbol tippen, wird der Benutzer zum Navigationsziel der obersten Ebene geführt, das diesem Symbol zugeordnet ist.

## Bottom Navigation (Untere Navigation)

Wenn es nur **3** Aktionen gibt, werden immer sowohl Symbole als auch Beschriftungen angezeigt.

{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}}

## Untere Navigation ohne Beschriftung

Bei **4** oder **5** Aktionen werden inaktive Ansichten nur als Symbole angezeigt.

{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}}