Functionality
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.
Menu with Toolbar
The Menu and Toolbar widgets have a similar style and can be used together for creating fully-functional menu bars for your application.
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.
Submenu
The Submenu contains a list of items that appears on the screen after a particular menu item is selected. You can change the way of submenu opening. Depending on the configuration, to open a submenu a user should click a menu item or hover a mouse cursor over it. A submenu item can contain plain text, HTML code or point to any previously initialized Webix window.
Hover menu item to browse their submenus.
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.
Links
You can add a custom HTML link to any menu or submenu item.
Jump to one of the following destinations within this page.
Hide or disable
Webix provides you with API that allows hiding or disabling particular submenu items.
Webix Window as submenu
Any submenu of the Menu widget can house a previously initialized Webix Window, Popup, Submenu or Context widget.