Горизонтальная навигация в узком контейнере
Короткую навигацию можно оставить в одной строке с локальной прокруткой, если перенос строк неудобен для задачи.
Назначение
Короткую навигацию можно оставить в одной строке с локальной прокруткой, если перенос строк неудобен для задачи.
Как это работает
Flexbox, flex:none и overflow-x:auto сохраняют размеры ссылок и ограничивают прокрутку самим меню. Подпись области и видимый фокус помогают понять назначение и текущее положение.
Пример
<style>.topics{display:flex;gap:8px;overflow-x:auto;padding:8px;max-width:22rem}.topics a{flex:none;padding:8px;border:1px solid;border-radius:6px}.topics a:focus-visible{outline:2px solid #11694e;outline-offset:2px}</style>
<nav class="topics" aria-label="Темы примера"><a href="#html">HTML</a><a href="#css">CSS</a><a href="#javascript">JavaScript</a><a href="#access">Доступность</a></nav><p id="html">HTML</p><p id="css">CSS</p><p id="javascript">JavaScript</p><p id="access">Доступность</p>Что должно получиться
Прокрутка при необходимости остаётся внутри меню, а ссылки ведут к существующим целям. Переходы можно выполнить без мыши при корректном поведении браузера.
Граница применения и частая ошибка
Не скрывайте все признаки продолжения меню и не обрезайте фокус крайних ссылок. Если элементов мало, обычный перенос строк может быть проще и доступнее прокрутки.
Самостоятельная проверка
Сузьте контейнер и пройдите все ссылки клавишей Tab. Убедитесь, что сфокусированная ссылка видна и что горизонтальная прокрутка не появилась у всей страницы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.