UI виджет Menu

JavaScript виджет Menu разработан для улучшения навигации в веб-приложениях. Он поможет вам и вашим пользователям быстро находить нужные опции в меню и подменю.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Вы можете использовать разные элементы в качестве пунктов Webix Menu: обычный текст, HTML код и другие виджеты Webix. Элементы выпадающего меню можно расположить вертикально или горизонтально. Webix API позволяет скрывать или блокировать элементы меню и прикреплять к ним разные обработчики событий. Сочетая этот виджет с Toolbar, вы сможете создавать функциональные панели меню, которые позволят пользователям удобно управлять приложением.

Вертикальные и горизонтальные меню

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

Способы открыть скрытые пункты меню

По умолчанию, подпункты открываются при наведении курсора на соответствующую опцию меню. Вы также можете открывать подпункты меню по клику.

Наведите курсор на опции меню слева или кликните по опциям меню справа.

Автоматическое определение ширины подменю

Благодаря свойству autowidth, элементы подменю будут изменять ширину в зависимости от размеров текста в них.

Бейджи

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

Разделители

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

Скрывайте или блокируйте опции меню

С помощью Webix API вы можете скрывать или блокировать определенные опции меню.