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.
<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>Bottom navigation with no label
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.