Mobile-first
#mobile-bottom-nav•beginner•Тип: pattern
Нижняя мобильная панель навигации (Зона большого пальца)
Фиксированная внизу экрана панель для смартфонов с учетом safe-area-inset отступов, активными индикаторами разделов и быстрым доступом к главным экранам.
#mobile#bottom-nav#thumb-zone#safe-area#navigation#smartphone
Инженерный разбор & UX-логика
Нижняя панель приложения/сайта для мобильных устройств, расположенная в самой удобной зоне досягаемости пальца (Thumb Zone).
💡 Почему это работает: Современные экраны смартфонов больше 6.5 дюймов — дотянуться до левого верхнего угла для открытия меню трудно. Нижняя панель решает проблему на 100%.
Где использовать
- Мобильные версии веб-приложений (PWA), SaaS-дашбордов и каталогов
- Личные кабинеты пользователей на смартфонах
Частые архитектурные ошибки
- Отсутствие отступа env(safe-area-inset-bottom), из-за чего на iPhone панель перекрывается домашней полоской
- Больше 5 пунктов меню в один ряд (кнопки становятся слишком узкими)