Тип компонента Меню

Что это за компонент

Меню - это компонент для навигации по разделам клиентской витрины.

Если говорить совсем просто, это набор пунктов, по которым клиент может:

• перейти в нужный раздел
• открыть вложенные подпункты
• быстро выбрать нужное направление внутри витрины

Такой блок удобен, когда в приложении много экранов, подборок, контентных страниц или категорий, и клиенту нужен понятный маршрут.

Когда использовать именно этот тип

Меню подходит, если нужно:

• собрать навигацию по разделам
• показать структуру витрины
• дать клиенту быстрый вход в основные направления
• вывести вложенные разделы
• сделать компактную навигацию внизу или внутри страницы

Этот тип особенно полезен там, где важно не просто показать один переход, а собрать понятную систему навигации из нескольких уровней.

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Меню.
2. В карточке компонента заполняется структура узлов.
3. Для каждого узла можно указать название, адрес, изображение и дочерние пункты.
4. После сохранения компонент размещается на странице.
5. В mini app клиент видит меню и использует его для перехода по витрине.

1. Как создать компонент Меню

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Меню.
4. Заполните название компонента.
5. При необходимости задайте код.
6. При необходимости заполните заголовок.
7. Нажмите Новый узел.
8. Заполните первый пункт меню.
9. При необходимости добавьте дочерние узлы.
10. Соберите всю структуру меню.
11. Сохраните компонент.
12. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Меню используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В обычной работе он нужен редко.

Тип

Для этого документа тип всегда будет Меню.

Он определяет:

• состав полей компонента
• внешний вид меню у клиента
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название меню в Omnis.

Лучше использовать понятные названия, например:

• Главное меню
• Навигация по разделам
• Нижнее меню
• Меню категорий

Приоритет

Это служебный параметр порядка. Он помогает определить положение меню среди других блоков страницы.

Активирован

Этот переключатель помогает:

• включать рабочее меню
• хранить черновики
• временно скрывать блок без удаления

3. Общие поля самого меню

Ниже стандартных полей находится область настройки самого меню.

Заголовок

Это поле верхнего уровня для самого меню.

Важно понимать: в текущем стандартном отображении меню основное внимание уделяется самим пунктам навигации, поэтому отдельный заголовок может не быть главным визуальным элементом меню. Если он вам не нужен, поле можно оставить пустым.

Если вы все же используете его как внутренний ориентир для команды, лучше писать коротко:

• Меню
• Разделы
• Навигация

4. Как устроены узлы меню

Меню в Omnis строится как дерево.

Это значит, что у вас есть:

• корневые узлы первого уровня
• дочерние узлы второго уровня
• при необходимости более глубокие вложенные уровни

Уровни меню

В интерфейсе Omnis узлы группируются по уровням:

• Уровень 1 - основные пункты
• Уровень 2 - дочерние подпункты
• следующие уровни - более глубокие вложения, если они нужны

Это помогает видеть структуру меню целиком и не путаться в подчиненности пунктов.

Новый узел

Эта кнопка добавляет новый пункт на текущем уровне.

Ее используют, когда нужно:

• добавить новый раздел
• расширить меню
• перестроить навигацию

Дочерний узел

Эта кнопка добавляет вложенный подпункт внутрь уже существующего узла.

Она полезна, если нужно:

• собрать подразделы
• оформить подменю
• показать более подробную структуру внутри одного направления

Изменение порядка узлов

Узлы можно переставлять местами на каждом уровне.

Это важно, потому что порядок напрямую влияет на то, что клиент увидит раньше.

Удаление узла

У каждого узла есть удаление.

Перед удалением полезно проверить, нет ли у пункта дочерних элементов, которые тоже исчезнут из структуры меню.

5. Все поля отдельного узла меню

У каждого узла есть собственный набор полей.

Наименование

Это текст пункта меню, который видит клиент.

Хорошие примеры:

• Каталог
• Акции
• Доставка
• О компании
• Контакты

Практический совет:

• делайте названия короткими
• используйте понятные слова
• не перегружайте пункт длинной фразой

URL

Это адрес перехода для конкретного пункта меню.

Если поле заполнено, пункт ведет клиента по указанному адресу.

Сюда можно указывать:

• внутреннюю страницу приложения
• раздел каталога
• контентную страницу
• подборку
• внешний адрес, если он нужен по сценарию

Важное правило для URL

Если узел должен открывать вложенное подменю, поле URL лучше оставить пустым.

Практически это правило звучит так:

• пункт с URL работает как переход
• пункт без URL может использоваться как раскрывающий узел для дочерних пунктов

Если одновременно заполнить URL и попытаться использовать дочерние узлы как подменю, клиентский сценарий может стать неудобным: пункт будет восприниматься прежде всего как переход.

Изображение

Это иконка или картинка пункта меню.

Она особенно полезна в компактном режиме меню, где изображение помогает быстрее считывать раздел.

Практически изображение стоит использовать, если:

• меню должно быть более наглядным
• нужно подчеркнуть разные разделы визуально
• вы используете компактное меню внизу экрана

Если изображение не нужно, поле можно оставить пустым.

6. Как Меню выглядит у клиента

У компонента Меню есть два основных режима отображения.

7. Обычное меню

В обычном режиме меню выглядит как вертикальный список пунктов.

Клиент может:

• нажимать на пункты с адресом и переходить в нужный раздел
• раскрывать пункты без адреса, если у них есть дочерние элементы

Как работает вложенность

Если у узла есть дочерние пункты и у самого узла не заполнен URL, клиент может раскрыть этот узел и увидеть вложенные элементы.

Вложенные уровни показываются ниже основного пункта и помогают аккуратно показать структуру разделов.

8. Компактное меню tap-bar

В компактном режиме меню работает как более легкая навигационная панель.

В этом режиме корневые пункты отображаются компактно, а дочерние пункты могут открываться в отдельной нижней панели.

Это удобно, если:

• меню нужно разместить в узкой области
• навигация должна быть более мобильной и компактной
• корневые разделы лучше показывать как короткие кнопки с иконками

Что видит клиент в режиме tap-bar

Клиент обычно видит:

• компактные корневые пункты
• подпись у каждого пункта
• изображение, если оно задано

Если у корневого узла есть дочерние пункты и нет собственного адреса, при нажатии открывается нижняя панель со списком вложенных элементов.

9. Общие настраиваемые свойства компонента

Как и у других компонентов, у Меню действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить меню от соседних блоков
• сделать страницу аккуратнее
• встроить навигацию в нужную композицию экрана

10. Собственные настраиваемые свойства Меню

У Меню есть собственные настраиваемые свойства, которые управляют режимом отображения, размерами текста, иконками и внешним видом компактного подменю.

Режим отображения

• skin - режим меню

Практически здесь используются два варианта:

• пустое значение или обычный режим - вертикальное раскрывающееся меню
• tap-bar - компактное меню с нижней панелью для подменю

В редакторе для skin теперь доступен готовый выбор между обычным режимом и tap-bar.

Заголовки и подписи

• size-title - размер заголовка меню
• size-sub-title - размер заголовка нижней панели или подзаголовка
• size-root-nodes - размер текста корневых пунктов
• size-child-nodes - размер текста дочерних пунктов

Эти свойства помогают сделать меню:

• более заметным
• более компактным
• более читабельным
• ближе к фирменному стилю витрины

Иконки и изображения

• size-icon - размер иконок корневых пунктов
• size-child-icon - размер иконок дочерних пунктов
• color-icon - цвет иконок

Эти свойства важны, если меню строится вокруг визуальных ориентиров, а не только текста.

Цвета текста

• color-title - цвет заголовка меню
• color-nodes - цвет корневых пунктов
• color-child-nodes - цвет дочерних пунктов

С их помощью можно сделать структуру меню:

• более контрастной
• более спокойной
• более согласованной с общей темой витрины

Настройки режима tap-bar

• size-tap-bar-label - размер подписи в компактном режиме
• color-tap-bar-label - цвет подписи в компактном режиме
• tap-menu-backdrop - фон затемнения под нижней панелью
• tap-menu-surface - фон самой нижней панели

Эти свойства особенно важны, если Меню используется как компактная мобильная навигация.

11. Практические рекомендации по настройке

Чтобы Меню было удобным для клиента, полезно придерживаться нескольких правил.

Не смешивайте переход и раскрытие в одном пункте без необходимости

Если пункт должен открывать подменю, лучше оставить его без URL. Тогда клиенту будет понятнее, что этот узел раскрывает вложенные разделы, а не ведет сразу на другую страницу.

Держите названия короткими

Меню должно считываться быстро. Короткие и понятные названия работают лучше длинных формулировок.

Стройте дерево логично

Если уровней слишком много или структура выглядит случайной, клиенту труднее ориентироваться. Лучше собирать меню вокруг понятной иерархии.

Используйте изображения там, где они действительно помогают

Иконки особенно полезны в компактном меню. Но если изображения визуально шумят и не добавляют ясности, лучше оставить меню текстовым.

Проверяйте результат на телефоне

Именно на мобильном экране лучше всего видно:

• удобно ли нажимать на пункты
• читаются ли подписи
• не перегружена ли нижняя панель
• понятно ли, какие пункты ведут по адресу, а какие раскрывают подменю