Как создать и настроить меню в 1С-Битрикс: пошаговое руководство

Меню — ключевой элемент навигации на сайте, от которого зависит удобство пользователей и SEO-продвижение. В 1С-Битрикс реализовано несколько способов создания меню: через визуальный редактор, компоненты системы и программный код. Независимо от выбранного метода, важно учитывать иерархию разделов, адаптивность для мобильных устройств и совместимость с шаблоном сайта.

Эта статья поможет разобраться, как создать меню в 1С-Битрикс с нуля — от простого горизонтального до сложного многоуровневого с динамическими пунктами. Мы рассмотрим стандартные инструменты админ-панели, работу с компонентом menu, а также ручную правку шаблонов для нестандартных решений. Особое внимание уделим типичным ошибкам, которые приводят к сбоям отображения или дублированию ссылок.

Если вы только начинаете работать с системой, начните с раздела о создании меню через визуальный редактор — это самый простой способ. Опытные разработчики найдут полезными советы по оптимизации производительности и интеграции меню с 1С:Управление сайтом.

Типы меню в 1С-Битрикс и их назначение

В 1С-Битрикс поддерживается несколько типов меню, каждый из которых решает конкретные задачи навигации. Выбор подходящего типа зависит от структуры сайта, целевой аудитории и дизайнерских требований. Рассмотрим основные варианты:

📌 Горизонтальное меню — классический вариант для главных разделов сайта (например, "О компании", "Услуги", "Контакты"). Обычно размещается в шапке сайта и поддерживает 1–2 уровня вложенности.
📑 Вертикальное меню — используется для боковых панелей или каталогов с глубокой иерархией (интернет-магазины, справочники). Может содержать 3+ уровней вложенности.
🔍 Динамическое меню — формируется автоматически на основе структуры сайта (разделов инфоблоков, каталогов). Актуально для сайтов с часто обновляемым контентом.
🎨 Кастомное меню — создаётся вручную через HTML/CSS или компоненты с уникальным дизайном (например, мегаменю с баннерами или иконками).

Для большинства корпоративных сайтов достаточно комбинации горизонтального меню в шапке и вертикального в подвале. Интернет-магазины часто требуют более сложных решений — например, мегаменю с preview товаров или фильтрами. В 1С-Битрикс все эти варианты реализуемы как через стандартные инструменты, так и с помощью кастомизации.

При выборе типа меню учитывайте:

📱 Адаптивность — как меню будет выглядеть на мобильных устройствах (возможно, потребуется "гамбургер"-меню).
🔄 Динамичность — если структура сайта часто меняется, лучше использовать автоматически обновляемые меню.
🎯 Цели бизнеса — например, для интернет-магазина приоритетны меню с быстрым доступом к категориям и фильтрам.

Создание меню через визуальный редактор (для начинающих)

Самый простой способ добавить меню на сайт — использовать встроенный визуальный редактор в админ-панели 1С-Битрикс. Этот метод не требует знаний программирования и подходит для базовых структур. Инструкция:

Перейдите в раздел Контент → Структура сайта.
Нажмите кнопку "Добавить меню" в верхней панели.
Задайте название меню (например, top_menu для верхнего меню) и сохраните.
В открывшемся редакторе добавьте пункты меню, указав для каждого:
- 🔗 Текст ссылки (например, "Главная").
- 🌐 Ссылку (можно выбрать из структуры сайта или ввести вручную).
- 📂 Родительский пункт (для создания вложенности).

После сохранения меню его нужно привязать к шаблону сайта. Для этого:

Перейдите в Дизайн → Шаблоны сайта.
Выберите шаблон вашего сайта и откройте файл header.php (или аналогичный, где размещается шапка).

Добавьте вызов компонента меню:

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"horizontal_multilevel",
array(
"ROOT_MENU_TYPE" => "top_menu",
"MAX_LEVEL" => "2",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "Y",
"DELAY" => "N",
"ALLOW_MULTI_SELECT" => "N"
),
false
);?>

Дублирующиеся ссылки удалены|

Все пункты имеют корректные URL|

Вложенность не превышает 3 уровней (для мобильной версии)|

Меню привязано к нужному шаблону-->

Если после сохранения меню не отображается, проверьте:

🔍 Правильность имени меню в параметре ROOT_MENU_TYPE.
📁 Наличие файла шаблона компонента (по умолчанию лежит в /bitrix/templates/.default/components/bitrix/menu/horizontal_multilevel/).
🔄 Кэш сайта (иногда требуется очистка после изменений).

💡

Используйте осмысленные имена для меню (например, footer_menu, catalog_menu), чтобы потом было проще ориентироваться в коде.

Настройка многоуровневого меню с вложенными пунктами

Многоуровневые меню позволяют организовать сложную навигацию, например, для интернет-магазинов с большим ассортиментом. В 1С-Битрикс поддерживается неограниченная вложенность, но на практике рекомендуется использовать не более 3–4 уровней, чтобы не усложнять пользовательский опыт.

Чтобы создать вложенное меню:

В редакторе меню (Контент → Структура сайта → [Ваше меню]) добавьте основные пункты (например, "Каталог").
Для каждого основного пункта нажмите "Добавить подпункт" и заполните данные (например, "Одежда → Мужская → Футболки").
В настройках компонента меню укажите параметр MAX_LEVEL — максимальный уровень вложенности (например, "MAX_LEVEL" => "3").

Для корректного отображения вложенных пунктов потребуется:

🎨 CSS-стилизация — добавьте стили для подменю (например, выпадающие блоки при наведении).
📱 Адаптивность — на мобильных устройствах вложенные пункты обычно раскрываются по клику.
🔄 JavaScript — для анимации и обработки событий (можно использовать готовые решения из Bitrix Framework).

Пример CSS для выпадающего меню

.top-menu li:hover > ul {


display: block;
position: absolute;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

Частая ошибка при работе с многоуровневыми меню — неправильная привязка шаблона компонента. Если подменю не раскрываются, проверьте:

📝 Параметр CHILD_MENU_TYPE в компоненте (должен совпадать с типом дочернего меню).
🔧 Наличие файла шаблона для дочернего меню (например, /bitrix/templates/.default/components/bitrix/menu/vertical_multilevel/template.php).

💡

Для интернет-магазинов на 1С-Битрикс оптимально использовать компонент bitrix:catalog.section.list для вывода категорий вместо ручного меню — это упрощает обновление ассортимента.

Динамическое меню на основе структуры сайта

Динамические меню автоматически формируются на основе разделов сайта, инфоблоков или каталогов. Это удобно для сайтов с часто обновляемым контентом (новостные порталы, блоги, интернет-магазины), так как не требует ручного редактирования при добавлении новых страниц.

Чтобы создать динамическое меню:

Перейдите в Контент → Структура сайта.
Нажмите "Добавить меню" и выберите тип "Динамическое".
Укажите источник данных:
- 📂 Разделы сайта — меню будет строиться по иерархии папок.
- 🛒 Каталог товаров — для интернет-магазинов (требуется модуль Интернет-магазин).
- 📝 Инфоблоки — для новостей, статей, каталогов без торгового функционала.

Настройте параметры фильтрации (например, показывать только активные разделы).

Пример вызова динамического меню для каталога:

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"catalog_sections",
array(
"ROOT_MENU_TYPE" => "catalog",
"MAX_LEVEL" => "2",
"CHILD_MENU_TYPE" => "subcatalog",
"IBLOCK_TYPE" => "catalog",
"IBLOCK_ID" => "2", // ID вашего каталога
"DEPTH_LEVEL" => "2",
"CACHE_TIME" => "3600"
),
false
);?>

Преимущества динамических меню:

⚡ Автоматическое обновление — новые разделы или товары сразу появляются в меню.
🔄 Централизованное управление — изменения в структуре сайта автоматически применяются к меню.
🎯 SEO-оптимизация — поисковые роботы лучше индексируют ссылки, соответствующие реальной структуре.

💡

Для ускорения работы динамического меню используйте кэширование (параметр CACHE_TIME). Оптимальное значение — 3600 секунд (1 час).

Недостатки:

⚠️ Сложнее кастомизировать внешний вид (требуется правка шаблонов компонента).
⚠️ Может замедлять сайт при большой вложенности (решается кэшированием).

Ручная правка шаблонов меню для кастомного дизайна

Если стандартные шаблоны меню в 1С-Битрикс не подходят под дизайн сайта, их можно полностью переопределить. Для этого потребуется:

Скопировать стандартный шаблон компонента bitrix:menu в папку вашего шаблона:

cp -r /bitrix/templates/.default/components/bitrix/menu/horizontal_multilevel/

/bitrix/templates/[VAШ_ШАБЛОН]/components/bitrix/menu/my_custom_menu/

Отредактировать файлы:
- template.php — логика формирования HTML.
- style.css — стили для меню.
- script.js — скрипты для интерактивности (например, выпадающие подменю).

В вызове компонента указать новый шаблон:

"TEMPLATE" => "my_custom_menu"

Пример кастомизации template.php для горизонтального меню с иконками:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
<ul>
<?foreach($arResult as $item):?>
<li class=<?=$item["SELECTED"] ? "active" : ""?>>
<a href=<?=$item["LINK"]?>>
<iPARAMS"]["ICON"]?>"></i>
<?=$item["TEXT"]?>
</a>
<?if ($item["IS_PARENT"]):?>
<ul>
<?foreach($item["ITEMS"] as $child):?>
<li><a href=<?=$child["LINK"]?>><?=$child["TEXT"]?></a></li>
<?endforeach;?>
</ul>
<?endif;?>
</li>
<?endforeach;?>
</ul>

Для добавления иконок к пунктам меню:

В редакторе меню (Контент → Структура сайта) перейдите в "Дополнительные параметры" пункта.
Добавьте параметр ICON со значением класса иконки (например, fa-home для Font Awesome).

Как подключить Font Awesome в 1С-Битрикс

1. Скачайте библиотеку с официального сайта.

2. Загрузите файлы в папку шаблона (/bitrix/templates/[VAШ_ШАБЛОН]/assets/fonts/).

3. Подключите CSS в файле template_epilog.php:

<link rel="stylesheet" href=<?=SITE_TEMPLATE_PATH?>/assets/fonts/font-awesome/css/all.min.css">

Важно: при кастомизации шаблонов всегда создавайте резервную копию оригинальных файлов. Обновления 1С-Битрикс могут перезаписать стандартные шаблоны, но ваши кастомные останутся нетронутыми, если они лежат в папке вашего шаблона.

Оптимизация меню для SEO и производительности

Меню влияет не только на удобство пользователей, но и на SEO-продвижение сайта. Поисковые роботы анализируют структуру ссылок, поэтому важно следовать нескольким правилам:

🔗 Семантическая вложенность — пункты меню должны отражать иерархию контента (например, "Услуги → Разработка сайтов → 1С-Битрикс").
📌 Уникальные анкоры — избегайте повторяющихся текстов ссылок (например, не используйте "Подробнее" для всех пунктов).
⚡ Минимизация кода — удаляйте лишние теги и пробелы в HTML-выводе меню для ускорения загрузки.
🔄 Кэширование — включайте кэш для динамических меню (параметр CACHE_TIME).

Для проверки SEO-оптимизированности меню используйте инструменты:

Инструмент	Что проверяет	Рекомендации
Google Search Console	Индексацию ссылок из меню	Убедитесь, что все важные страницы проиндексированы
PageSpeed Insights	Время загрузки меню	Оптимизируйте CSS/JS, используйте lazy load для иконок
Screaming Frog	Структуру внутренних ссылок	Исправляйте битые ссылки и дубли анкоров
1С-Битрикс: Монитор производительности	Нагрузку от динамических меню	Увеличьте `CACHE_TIME` или оптимизируйте запросы

Типичные SEO-ошибки в меню:

❌ Ссылки на несуществующие страницы (404 ошибки).
❌ Дублирование ссылок (например, одна и та же страница доступна по разным URL).
❌ Слишком глубокая вложенность (поисковые роботы могут не индексировать уровни глубже 3–4).

💡

Для интернет-магазинов добавьте в меню ссылки на популярные категории и акционные товары — это повышает конверсию и улучшает поведенческие факторы.

Частые ошибки и их решение

При работе с меню в 1С-Битрикс даже опытные разработчики сталкиваются с типичными проблемами. Рассмотрим наиболее распространённые ошибки и способы их устранения:

⚠️ Внимание: Если после изменений в меню сайт перестал открываться, проверьте синтаксис в файлах шаблонов (особенно в template.php). Часто ошибки возникают из-за пропущенных точек с запятой или неправильных циклов foreach.

Проблема 1: Меню не отображается на сайте

🔍 Причина: Неправильное имя меню в параметре ROOT_MENU_TYPE.
✅ Решение: Проверьте название меню в админ-панели (Контент → Структура сайта) и сравните с параметром в компоненте.

Проблема 2: Подменю не раскрываются

🔍 Причина: Отсутствует JavaScript для обработки событий или неправильные CSS-стили.
✅ Решение:
1. Проверьте подключение скриптов в шаблоне.
2. Добавьте в CSS правило .menu-item:hover > .submenu { display: block; }.

Проблема 3: Дублирующиеся пункты меню

🔍 Причина: Ошибка в логике компонента или кэширование.
✅ Решение:
1. Очистите кэш сайта (Настройки → Производительность → Очистить кэш).
2. Проверьте файл template.php на наличие дублирующих циклов.

Проблема 4: Меню медленно загружается

🔍 Причина: Слишком много уровней вложенности или отсутствие кэширования.
✅ Решение:
1. Установите "CACHE_TIME" => "3600" в параметрах компонента.
2. Ограничьте уровень вложенности ("MAX_LEVEL" => "2").

Проблема 5: Меню не адаптируется под мобильные устройства

🔍 Причина: Отсутствуют медиа-запросы в CSS или не подключён JavaScript для "гамбургер"-меню.

✅ Решение:

@media (max-width: 768px) {
.menu { display: none; }
.menu-button { display: block; }
}

⚠️ Внимание: Если вы используете сторонние модули для меню (например, Megamenu), убедитесь в их совместимости с вашей версией 1С-Битрикс. Некоторые решения могут конфликтовать с ядром системы.

FAQ: Ответы на частые вопросы

Как сделать выпадающее меню с задержкой (чтобы не закрывалось при случайном уводе курсора)?

Используйте параметр "DELAY" => "Y" в компоненте меню и добавьте JavaScript для обработки событий mouseleave с таймером. Пример кода:

$(document).ready(function(){
var timer;
$(".menu-item").hover(
function(){ clearTimeout(timer); },
function(){
timer = setTimeout(function(){
$(".submenu").hide();
}, 500); // задержка 500 мс
}
);
});

Можно ли сделать разные меню для разных групп пользователей?

Да, для этого используйте параметр "USER_GROUPS" в компоненте или создайте отдельные меню с условиями в шаблоне. Пример:

<?if ($USER->IsAdmin()):?>
<?$APPLICATION->IncludeComponent(...); // Меню для админов
<?else:?>
<?$APPLICATION->IncludeComponent(...); // Меню для остальных
<?endif;?>

Как экспортировать/импортировать меню между сайтами на Битрикс?

Меню в 1С-Битрикс хранятся в базе данных, но их можно перенести с помощью модуля "Экспорт/Импорт" или вручную через SQL-запросы. Альтернативный способ — экспортировать структуру в XML через Контент → Экспорт данных.

Почему в меню отображаются неактивные разделы?

Проверьте настройки компонента: параметр "ONLY_ACTIVE" => "Y" скрывает неактивные пункты. Также убедитесь, что в разделе сайта установлен флаг "Активен" (Контент → Структура сайта).

Как добавить иконки из Font Awesome к пунктам меню?

В редакторе меню перейдите в "Дополнительные параметры" пункта и добавьте параметр ICON со значением класса (например, fa-shopping-cart). Затем отредактируйте шаблон компонента, как показано в разделе про кастомизацию.

Создание и настройка меню в 1С-Битрикс: от базового до кастомного