Bottom Navigation (Нижняя панель навигации)

Нижние панели навигации позволяют перемещаться между основными пунктами назначения в приложении.

Нижняя панель навигации отображает от трех до пяти элементов перехода внизу экрана. Каждый элемент перехода представлен значком и необязательной текстовой меткой. При нажатии на нижний значок навигации пользователь попадает на страницу, связанную с этим значком.

Если существует четыре или пять действий, стоит отображать неактивные элементы только в виде значков.

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

Если существует четыре или пять действий, стоит отображать неактивные элементы только в виде значков.

Fixed positioning (фиксированное позиционирование)

В этом примере нижняя панель навигации остаётся зафиксированной снизу вне зависимости от количества контента на экране.

Сторонняя библиотека маршрутизации

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 (Нижняя панель навигации)