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
Quando existir apenas três ações, exiba ambos, os ícones e rótulos de texto.
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<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.
<BottomNavigation value={value} onChange={handleChange} className={classes.root}>
<BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
<BottomNavigationAction label="Folder" value="folder" icon={<FolderIcon />} />
</BottomNavigation>