Menu Bar
- Styles
- Overflow
- Menu Item Features
- Dividers
- Open on Hover
- Keyboard Usage
- Drop-Down and "Combo" Buttons
- Best Practices
- Related Components
Menu Bar is a horizontal button bar with hierarchical drop-down menus. Menu items can either trigger an action, open a menu, or work as a toggle.
Styles
Default Variants
The following variants are available for adjusting the component’s appearance:
Variant | Usage recommendations |
---|---|
Tertiary | Corresponds to the tertiary button variant, omitting the background color. |
Primary | Corresponds to the primary button variant. As only one primary action should be presented in the same part of the UI, this should only be used for drop-down button use cases. |
Small | Compact variant. Can be combined with Tertiary and Primary. |
Tip
|
Default menu button styles can be customized
Note that the standard Menu Button styles can be adjusted using theme features, so these variants should only be used to differentiate special instances of the component.
|
Styling Menu Items
An individual menu item can be styled using a custom variant.
To style a root-level item, create a custom variant for the vaadin-menu-bar-button
component.
To style a sub-menu item, create a custom variant for the vaadin-context-menu-item
component.
See Vaadin Component Variants for details how to add style sheets for those components.
new tab
Source code
MenuBarCustomTheme.java
vaadin-context-menu-item.css
vaadin-context-menu-item.css
vaadin-menu-bar-button.css
vaadin-menu-bar-button.css
Overflow
Items that don’t fit into the current width of the menu bar automatically collapse into an overflow menu at the end:
Menu Item Features
Icons
Menu items can have icons in addition to, or instead of text.
Usage recommendations:
-
Use icons sparingly. Most actions are difficult to reliably represent with icons, and the benefit of icons in addition to text should be weighed against the additional visual noise this creates.
-
Menu items in dropdown menus should always have text labels.
-
Icon-only menu buttons should be primarily used for extremely common recurring actions with highly standardized, universally understood icons (for example, a cross for close).
-
Icon-only menu buttons should provide a textual alternative for screen readers using the
aria-label
attribute.
Menu Bars with icon-only top-level items can use the Tertiary Inline style variant to reduce the horizontal padding around the icons.
Warning
|
Other components in menu items
While it’s technically possible to put any UI element in a menu item, this can be problematic in terms of accessibility, as they cannot be focused and may not be correctly interpreted by assistive technologies.
|
Checkable Menu Items
Menu items in drop-down menus can be configured as checkable, for toggling options on and off.
Note
|
Not a replacement for radio buttons
A Menu Bar with checkable items should not be used as a replacement for radio buttons in a form.
|
Dividers
You can use dividers to separate and group related content.
Use dividers sparingly to avoid creating unnecessary visual clutter.
Warning
|
Content other than menu items not accessible
While it’s technically possible to put any UI element in a drop-down menu, including interactive components, they will not be accessible by keyboard or assistive technologies.
|
Keyboard Usage
Drop-Down and "Combo" Buttons
A Menu Bar with a single top-level item is essentially a drop-down button. This solution provides a better user experience and better accessibility than a regular Button paired with a Context Menu.
So-called “combo buttons” can be created in a similar way, for example to provide a set of variations on an action.
Best Practices
-
Menu Bar should not be used for navigation. Use tabs for switching between content, or anchor elements for regular navigation.
-
Menu Bar is not an input field. Use Select, Combo Box, or Radio Button instead.
Related Components
Component | Usage recommendations |
---|---|
Regular Button component for individual actions. | |
Drop-down input field. | |
Tabs should be used to split content into sections that the user can switch between. | |
A generic drop-down menu that can be triggered from any component. |
9AC623D3-FAAD-42D2-99EC-774F9A777E13