Простое адаптивное меню без скрытых пунктов

Задача и ограничения

Для небольшого сайта из четырёх-пяти разделов не всегда нужен выпадающий мобильный интерфейс. Пункты можно оставить видимыми и разрешить перенос. Так навигация работает сразу, даже если скрипты не загрузились.

Пошаговое решение

Используйте nav с понятным именем и список ссылок. На списке включите display: flex, flex-wrap: wrap и gap. У ссылок добавьте достаточные внутренние отступы, чтобы по ним было удобно попасть пальцем.

Текущую страницу обозначьте aria-current=»page» и заметным оформлением. Не используйте только цвет: можно добавить подчёркивание или более выраженную рамку. Сохраните отдельное видимое состояние фокуса.

Код компонента

<style>
nav ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
nav a { display: block; padding: 10px 14px; color: #11694e; border-radius: 6px; }
nav a[aria-current] { background: #eaf4ee; text-decoration: underline; }
nav a:focus-visible { outline: 3px solid #b87912; }
</style>
<nav aria-label="Главное меню"><ul><li><a href="#" aria-current="page">Обзор</a></li><li><a href="#html">HTML</a></li><li><a href="#css">CSS</a></li><li><a href="#practice">Практика</a></li></ul></nav>
<p id="html">HTML</p><p id="css">CSS</p><p id="practice">Практика</p>

Что может пойти не так

Как проверить результат

1. Проверьте меню на узкой ширине.
2. Перейдите по всем пунктам через Tab и Enter.
3. Увеличьте названия пунктов и убедитесь, что ничего не скрыто.

Разберите также: навигация HTML, перенос Flexbox.