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

# Bottom Navigation

<p class="description">Bottom navigation bars allow movement between primary destinations in an app.</p>

[Bottom navigation](https://material.io/design/components/bottom-navigation.html) bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

## Bottom Navigation

When there are only **three** actions, display both icons and text labels at all times.

{{"demo": "pages/demos/bottom-navigation/SimpleBottomNavigation.js"}}

## Bottom Navigation with no label

If there are **four** or **five** actions, display inactive views as icons only.

{{"demo": "pages/demos/bottom-navigation/LabelBottomNavigation.js"}}