Бургер‑меню.
Бургер‑меню— это такая кнопка, выглядит как три горизонтальные полоски, а внутри прячет всё меню. Название пошло от аналогии с бургером. Полоски будто слои — булочки сверху и снизу, котлета посередине. Отсюда и «бургер».
Работает максимально просто: ты нажимаешь на эти полоски и появляется список пунктов. Выбрал нужный — меню закрылось. На мобильных оно часто занимает весь экран, на планшетах может выезжать сбоку. Но суть одна: сначала ничего не видно, потом видно всё.
Где его ставят и почему это вообще прижилось
Бургер любят ставить там, где места мало, а пунктов много. Это такой «шкаф-купе» для навигации: снаружи аккуратно, внутри всё лежит.
Вот типичные случаи, когда бургер выручает:
- Мобильные версии. На экране телефона 360–400 пикселей по ширине. Если туда вывалить все пункты меню, получится каша. Поэтому главные действия оставляют на виду (например, корзину, профиль), а остальное прячут в бургер.
- Лендинги и промо‑страницы. Тут задача — чтобы пользователь сразу видел главный посыл и кнопку действия. А меню — не главное, оно «на всякий случай», поэтому его и убирают.
- Дашборды и сложные сервисы. Представь CRM или аналитику: там десятки разделов, но в моменте тебе нужны только 2–3. Бургер помогает спрятать редко используемые пункты, чтобы не отвлекали.
Плюсы: почему дизайнеры его используют
Тут всё про удобство и чистоту:
- Экономит место. Вместо строки из 10 ссылок — одна маленькая иконка.
- Делает первый экран чище. Пользователь не сканирует кучу пунктов, а сразу видит контент.
- Легко добавлять новые пункты. Добавил ещё одну ссылку — снаружи ничего не поменялось, внутри просто стало на строчку больше.
Минусы: где бургер может всё испортить
И тут важно не переборщить, потому что у этой штуки есть обратная сторона:
- Скрытая навигация. Чтобы попасть в раздел, нужно сделать лишний шаг. Если пользователь пришёл за конкретным пунктом, это раздражает.
- Не все сразу понимают, что это меню. Особенно новички или люди, которые редко пользуются сайтами. Для них три полоски — просто линии.
- Теряется видимость важных действий. Если «Контакты» или «Оформить заказ» спрятаны в бургере, пользователь может их просто не найти.
Частые ошибки
Вот что чаще всего делают не так:
- Прячут самое важное. Если пользователи чаще всего идут в каталог или на страницу с ценами — пусть они будут на виду, а не в бургере.
- Делают слишком глубокие вложенности. Внутри бургера ещё одно меню, в нём ещё — и вот ты уже блуждаешь, как в лабиринте. Лучше упростить структуру.
- Иконка слишком мелкая или бледная. Если её не видно, никто не нажмёт. Она должна быть контрастной и стоять в привычном месте — обычно в левом или правом верхнем углу.
Примеры, как элемент можно использовать смотри в подборке на странице.
