Bottom navigation

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.

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>

<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

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.

Biblioteca de roteamento de terceiros

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.

Bottom navigation