See the new new component docs (under construction) for V19 and TypeScript samples.

Menu Bar

Menu bar

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.

Multi-level submenus

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.

Configurable items

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.

Customizable styles

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.