Menu Bar
- Usage
- Styling
- Styles
- Overflow
- Menu Item Features
- Dividers
- Open on Hover
- Tooltips
- Keyboard Usage
- Drop-Down & Combo Buttons
- Internationalization (i18n)
- Best Practices
- Related Components
Menu Bar is a horizontal button bar with hierarchical drop-down menus. Menu items can trigger an action, open a menu, or work as a toggle.
new tab
MenuBar menuBar = new MenuBar();
Text selected = new Text("");
ComponentEventListener<ClickEvent<MenuItem>> listener = e -> selected
.setText(e.getSource().getText());
Div message = new Div(new Text("Clicked item: "), selected);
menuBar.addItem("View", listener);
menuBar.addItem("Edit", listener);
MenuItem share = menuBar.addItem("Share");
SubMenu shareSubMenu = share.getSubMenu();
MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
socialMediaSubMenu.addItem("Facebook", listener);
socialMediaSubMenu.addItem("Twitter", listener);
socialMediaSubMenu.addItem("Instagram", listener);
shareSubMenu.addItem("By email", listener);
shareSubMenu.addItem("Get Link", listener);
MenuItem move = menuBar.addItem("Move");
SubMenu moveSubMenu = move.getSubMenu();
moveSubMenu.addItem("To folder", listener);
moveSubMenu.addItem("To trash", listener);
menuBar.addItem("Duplicate", listener);
Styles
Default Variants
The following variants are available to adjust the appearance of the component:
new tab
MenuBar menuWithDefaultTheme = new MenuBar();
addItem(menuWithDefaultTheme, "Default");
MenuBar menuWithTertiaryTheme = new MenuBar();
menuWithTertiaryTheme.addThemeVariants(MenuBarVariant.LUMO_TERTIARY);
addItem(menuWithTertiaryTheme, "Tertiary");
MenuBar menuWithPrimaryTheme = new MenuBar();
menuWithPrimaryTheme.addThemeVariants(MenuBarVariant.LUMO_PRIMARY);
addItem(menuWithPrimaryTheme, "Primary");
MenuBar menuWithSmallTheme = new MenuBar();
menuWithSmallTheme.addThemeVariants(MenuBarVariant.LUMO_SMALL);
addItem(menuWithSmallTheme, "Small");
Variant | Usage Recommendation |
---|---|
Tertiary | Corresponds to the tertiary button variant, omitting the background color. |
Primary | Corresponds to the primary button variant. Since only one primary action should be presented in the same part of the UI, this should be used only for drop-down button use cases. |
Small | Compact variant. Can be combined with Tertiary and Primary. |
Tip
|
Customize Default Menu Button Styles
The standard Menu Button styles can be adjusted using the Lumo style properties. These variants should be used only to differentiate special instances of the component.
|
Alignment
Top-level items are aligned by default to the start of the Menu Bar. Use instead the end-aligned
theme variant to align them to the end.
new tab
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_END_ALIGNED);
Styling Menu Items
Individual menu items can be styled by applying custom class names to them, and writing CSS style blocks targeting those class names. Notice that root-level menu items in the Menu Bar are wrapped in vaadin-menu-bar-button
elements, which inherit the class names from the items within them.
new tab
MenuItem view = menuBar.addItem("View");
view.addClassNames(LumoUtility.Background.PRIMARY,
LumoUtility.TextColor.PRIMARY_CONTRAST);
;
MenuItem edit = menuBar.addItem("Edit");
MenuItem share = menuBar.addItem("Share");
SubMenu shareSubMenu = share.getSubMenu();
shareSubMenu.addItem("By email").addClassNames(
LumoUtility.Background.PRIMARY,
LumoUtility.TextColor.PRIMARY_CONTRAST);
shareSubMenu.addItem("Get Link");
Note
|
Use Theme Names, Not Class Names pre-V24.3
In versions prior to 24.3, theme names must be used instead of class names (theme property / addThemeNames Java method). The CSS syntax for targeting a theme name is [theme~="custom-theme"]
|
Drop-down Indicators
Menu buttons with sub-menu can be visually identified from items that trigger an action immediately using dropdown-indicators
theme variant.
new tab
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_DROPDOWN_INDICATORS);
Overflow
Items that don’t fit into the current width of the menu bar collapse into an overflow menu at the end.
By default, collapsed items are removed from the end of the menu bar, but the component can be configured to remove items from the start instead.
new tab
MenuBar menuBar = new MenuBar();
addItems(menuBar);
Div div = new Div();
div.setText("Move the splitter to see overflow feature");
SplitLayout splitLayout = new SplitLayout(menuBar, div);
Menu Item Features
Several features are available for menu items. They’re described in the following sub-sections.
Icons
Menu items can have icons in addition to text — or instead of text.
new tab
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);
MenuItem share = createIconItem(menuBar, VaadinIcon.SHARE, "Share",
null);
SubMenu shareSubMenu = share.getSubMenu();
createIconItem(shareSubMenu, VaadinIcon.SHARE, "By Email", null, true);
createIconItem(shareSubMenu, VaadinIcon.LINK, "Get link", null, true);
createIconItem(menuBar, VaadinIcon.COPY, null, "duplicate");
...
private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName,
String label, String ariaLabel) {
return createIconItem(menu, iconName, label, ariaLabel, false);
}
private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName,
String label, String ariaLabel, boolean isChild) {
Icon icon = new Icon(iconName);
if (isChild) {
icon.getStyle().set("width", "var(--lumo-icon-size-s)");
icon.getStyle().set("height", "var(--lumo-icon-size-s)");
icon.getStyle().set("marginRight", "var(--lumo-space-s)");
}
MenuItem item = menu.addItem(icon, e -> {
});
if (ariaLabel != null) {
item.setAriaLabel(ariaLabel);
}
if (label != null