Menu bar is a set of horizontally stacked buttons offering the user quick access to a consistent set of commands.
Buttons are defined by items property, which accepts an array of objects. Each button can toggle
a submenu defined by children sub-property of the item object. The submenu items can have children
of their own, creating additional levels of nested menus.
By default, submenu can be opened on click and from keyboard, using Enter, Space, Up and Down arrow keys. Keyboard navigation for menu bar buttons and submenu items is implemented according to WAI-ARIA Authoring Practices 1.1.
When either a submenu item or menu bar button without nested children is clicked, the item-selected
event is fired with the event detail containing a value, which is a reference to the actual menu
item object provided in the original items property.
Selected item:
When opened, submenu can be switched by moving cursor over another button. Set open-on-hover
attribute to also open the submenu on mouseover event instead of click. Submenu can always be
closed by outside click, regardless of how it was opened.
Selected item:
If there is not enough width to fit all the menu bar, some buttons from the end are moved to submenu under the "overflow" button. When resizing screen or browser window, changing device orientation etc, width is dynamically recalculated to always fit.