Barra de navegación inferior

Las barras de navegación inferiores permiten movimiento entre destinos primarios en una aplicación.

La barra de Navegación Inferior muestra de tres a cinco destinos en la parte inferior de una pantalla. Cada destino es representado por un icono y una etiqueta de texto opcional. Cuando un icono de navegación inferior es tocado, el usuario es llevado al destino de navegación superior asociado con ese icono.

Barra de navegación inferior

Cuando sólo hay tres acciones, muestra las dos cosas, iconos y etiquetas de texto en todo momento.

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

Botón de navegación sin texto

Si hay cuatro ** o **cinco acciones, mostrar vistas inactivas solamente como iconos.

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

Barra de navegación inferior

Barra de navegación inferior

Botón de navegación sin texto

API