Pular para o conteúdo

Navegação inferior

A barra de navegação inferior permite navegar entre os principais destinos em um aplicativo.

Barras de navegação inferior apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone.

Navegação inferior

Se existir quatro ou cinco ações, exiba os destinos inativos somente com ícone.

<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>

Navegação inferior sem rótulo

Se existir quatro ou cinco ações, exiba os destinos inativos somente com ícone.

Posicionamento fixo

Esta demonstração mantém a navegação inferior fixa na parte inferior, não importa a quantidade de conteúdo na tela.