BottomNavigation для мобильных интерфейсов

BottomNavigation — это компонент библиотеки MUI, предназначенный для создания нижней навигационной панели в мобильных приложениях и веб-интерфейсах, адаптированных под мобильные устройства. Основная цель — предоставить пользователю быстрый доступ к ключевым разделам приложения, обычно в виде иконок с подписью.

import * as React from 'react';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';

export default function SimpleBottomNavigation() {
  const [value, setValue] = React.useState(0);

  return (
     {
        setValue(newValue);
      }}
    >
      } />
      } />
      } />
    
  );
}

Ключевые свойства BottomNavigation:

  • value — текущий выбранный элемент, обычно хранится в состоянии компонента.
  • onChange — функция обратного вызова, которая вызывается при изменении выбранного элемента. Принимает event и newValue.
  • showLabels — отображает подписи под иконками. Без этого свойства подписи показываются только для активного элемента.

BottomNavigationAction используется для создания отдельного пункта навигации. Он имеет следующие основные свойства:

  • label — текстовая подпись.
  • icon — иконка, обычно импортируемая из библиотеки @mui/icons-material.
  • value — уникальное значение элемента для синхронизации с value в BottomNavigation.

Настройка стилей и кастомизация

Для изменения внешнего вида BottomNavigation можно использовать системные свойства MUI, такие как sx, а также классы и тему.

 setValue(newValue)}
>
  • position: 'fixed' закрепляет панель внизу экрана, что важно для мобильных интерфейсов.
  • width: '100%' гарантирует растяжение панели на всю ширину экрана.
  • Цвета можно задавать через backgroundColor с использованием темы MUI, что упрощает поддержку светлой и тёмной темы.

Адаптивное поведение и управление состоянием

Для мобильных интерфейсов критически важно, чтобы BottomNavigation корректно реагировал на ориентацию экрана и размеры устройства.

const [value, setValue] = React.useState(0);

React.useEffect(() => {
  const handleResize = () => {
    if (window.innerWidth < 600) {
      setValue(0);
    }
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

Это позволяет динамически адаптировать выбранный элемент при изменении ширины экрана.

Интеграция с React Router

Для навигации между страницами часто используют BottomNavigation совместно с react-router-dom. В этом случае каждый BottomNavigationAction оборачивается в компонент Link.

import { Link } from 'react-router-dom';

}
/>

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

Расширенные возможности

  1. Иконки с Badge Для отображения уведомлений на элементах навигации можно использовать Badge из MUI.
import Badge from '@mui/material/Badge';


      
    
  }
/>
  1. Динамическая генерация элементов Для приложений с большим количеством пунктов лучше генерировать элементы через массив данных, чтобы избежать дублирования кода.
const navItems = [
  { label: 'Recents', icon: , value: 0 },
  { label: 'Favorites', icon: , value: 1 },
  { label: 'Nearby', icon: , value: 2 },
];

navItems.map(item => (
  
));
  1. Скрытие при скролле Для увеличения полезной площади экрана панель можно скрывать при прокрутке контента. Для этого используют хуки useScrollTrigger из MUI и Slide для анимации.

Рекомендации по UX

  • Использовать не более 3–5 элементов, чтобы панель оставалась компактной и удобной.
  • Подписи под иконками повышают понятность, особенно для новых пользователей.
  • Подсветка активного элемента должна быть контрастной, чтобы визуально отделять текущий раздел.
  • Фиксированная позиция внизу экрана обеспечивает привычное взаимодействие, особенно на устройствах с большим экраном.
Оглавление