JavaScript Menu UI widget

The JavaScript Menu widget is designed to make your web navigation user-friendly and visually appealing. It lets your end users select important items from a list of easily triggered submenus.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

You can use different types of elements as Webix Menu items: plain text, HTML code or even a Webix widget. Items of this JavaScript dropdown menu can be arranged vertically or horizontally. Webix API allows you to hide or disable menu items and attach different types of event handlers to them. Combining this widget with the Toolbar, you can create a fullу functional HTML5 menu bar that will provide users with full control over the app.

Vertical/Horizontal arrangement

The submenus of the widget can be arranged vertically or horizontally, enabling you to use them in any oriented layout. By default a horizontal menu will be created. To use a vertical menu, you have to add a single extra property to the menu definition.

Ways of opening submenus

By default the list of submenu items becomes visible after a user hovers over any menu item. You can also configure the Menu widget to open a submenu on a mouse click by using a special attribute in the menu configuration.

Hover menu items to the left or click menu items to the right.

Autowidth of submenus

If you enable the autowidth feature, the submenu items will change their width automatically according to the size of their labels.

Badges

Badges allow equipping a particular menu item with a neat orange circle with a number. You can use this feature to inform a user about the number of newly received messages, for example.

Separators

You can separate menu items from each other by using either Spacer or Separator. When you use the Spacer, a space between the menu items will be added. The Separator, in its turn, adds a horizontal line between the menu items.

Hide or disable

Webix provides you with API that allows hiding or disabling particular submenu items.