---
title: Bottom Navigation React component
components: BottomNavigation, BottomNavigationAction
githubLabel: component: BottomNavigation
materialDesign: https://material.io/components/bottom-navigation
---
Bottom navigation bars allow movement between primary destinations in an app.
Bottom navigation 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.
{{"component": "modules/components/ComponentLinkHeader.js"}}
When there are only three actions, display both icons and text labels at all times.
{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}}
If there are four or five actions, display inactive views as icons only.
{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}}
Keep Bottom Navigation fixed to the bottom, no matter the amount of content on-screen.
{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}}