Component for displaying a horizontal menu with multi-level sub-menus.
Top-level menu bar
The top-level menu consists of a set of buttons. The buttons open up dropdown menus when interacted with, or performs actions when clicked.
Smart handling of the menu bar area
If there is not enough space to show all items, then an ellipsis menu button is added. The rest of the views are shown as a dropdown menu to the ellipsis menu.
Open on click or on hover
Menus can be set to open on click or on hover. Menus can be closed with clicking outside or by pressing esc.
Each item can have more submenus, which means you can make a deep tree hierarchy. The component makes sure that the options are visible on the screen.
Items have configuration options, including disabling, marking as checked and adding icons to items. Separators can be added to the submenus to group the options.
The component supports both Lumo and Material themes. For the most straightforward styling, you can use Lumo and Material CSS custom properties. The top-level menu bar has the same style variants as Button, and the dropdowns are styled like Context Menu.