Bottom Navigation

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. They are primarily used on mobile applications. The BottomNavigation component displays a set of actions at the bottom of the screen. It uses the BottomNavigationAction component for each navigation item.

import * as React from 'react';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';

export default function BasicBottomNavigation() {
  const [value, setValue] = React.useState(0);

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

Without Labels

By default, only the selected BottomNavigationAction shows its label. Set showLabels to false to hide all labels.

import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';

<BottomNavigation value={value} onChange={handleChange}>
  <BottomNavigationAction icon={<RestoreIcon />} />
  <BottomNavigationAction icon={<FavoriteIcon />} />
  <BottomNavigationAction icon={<LocationOnIcon />} />
</BottomNavigation>

Always Show Labels

Set showLabels to true to always display labels for all actions.

<BottomNavigation 
  value={value} 
  onChange={handleChange}
  showLabels
>
  <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
  <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>

Controlled Component

The component is controlled when the value prop is provided. The onChange callback is triggered when the value changes.

const [value, setValue] = React.useState(0);

<BottomNavigation
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
>
  {/* Navigation actions */}
</BottomNavigation>