Bottom Navigation

The Bottom Navigation bar allows 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.

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

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
  <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>

<BottomNavigation
  showLabels
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
  <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>

Press Enter to start editing

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

Fixed positioning

This demo keeps bottom navigation fixed to the bottom, no matter the amount of content on-screen.

Third-party routing library

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The BottomNavigationAction component provides the component prop to handle this use case. Here is a more detailed guide.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Bottom Navigation

Bottom navigation

Bottom navigation with no label

Fixed positioning

Third-party routing library

API