Pixmora

Иконка меню для мобильной навигации

Гамбургер Lucide открывает боковое или выезжающее меню. Ниже отличие от панели и от знака выравнивания текста, плюс пример кнопки без обработчиков.

Как применить иконку «Гамбургер»

Сценарий страницы: Открытие мобильной навигации. Основной вариант - lucide:menu, набор Lucide, автор Lucide Contributors, лицензия ISC.

Гамбургер (menu): Три одинаковые горизонтальные линии без рамки. Кнопка «открыть меню» в шапке сайта или приложения.

Левая панель (panel-left): Прямоугольник окна с вертикальной границей слева: уже макет сайдбара, а не три линии. Переключатель видимости боковой колонки в кабинете или редакторе.

Выровнять текст (align-justify): Три линии на всю ширину как у меню, но в Lucide это знак выравнивания абзаца, не навигации. Панель форматирования текста. Для меню сайта берите menu.

В шапке обычно 24 px. В компактной мобильной панели хватит 20. Не раздувайте гамбургер до 64 внутри тонкой полосы шапки: линии сольются с соседним логотипом.

Это пример разметки без обработчиков. Замените путь к SVG и в своём коде переключайте aria-expanded, hidden у #site-nav и фокус. Декоративное img с пустым alt; смысл у aria-label кнопки.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Открыть меню. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Открыть меню">
  <img src="lucide-menu.svg" width="24" height="24" alt="">
</button>
<nav id="site-nav" hidden>
  <!-- пункты меню подключаются в проекте -->
</nav>

Частые вопросы

Чем menu отличается от panel-left?

menu обещает список пунктов. panel-left показывает сам каркас боковой колонки. Для «открыть меню» в шапке обычно достаточно трёх линий.

Нужен ли видимый текст рядом с гамбургером?

Если кнопкой пользуются часто на десктопе, текст «Меню» помогает. На узком экране достаточно aria-label «Открыть меню» или «Закрыть меню».