Menu Bar
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-menu-bar
Buttons
- Button element
-
vaadin-menu-bar-button - Button text
-
vaadin-menu-bar-button::part(label) - Hovered button
-
vaadin-menu-bar-button:hover - Focused button
-
vaadin-menu-bar-button[focused] - Disabled button
-
vaadin-menu-bar-button[disabled] - Button with a menu
-
vaadin-menu-bar-button[aria-haspopup] - Button with opened menu
-
vaadin-menu-bar-button[expanded] - Overflow button
-
vaadin-menu-bar-button[slot="overflow"] - Overflow button icon
-
vaadin-menu-bar-button[slot="overflow"] > [aria-hidden] - Button rich content wrapper
-
vaadin-menu-bar-button> vaadin-menu-bar-item - Button icon
-
vaadin-menu-bar-button> vaadin-menu-bar-item > vaadin-icon
Overlay
- Overlay element
-
vaadin-menu-bar-overlay - Overlay background
-
vaadin-menu-bar-overlay::part(overlay) - Overlay content wrapper
-
vaadin-menu-bar-overlay::part(content) - Nested sub-menu overlay
-
vaadin-menu-bar-overlay[modeless]
Items
- Item element
-
vaadin-menu-bar-item - Item content wrapper
-
vaadin-menu-bar-item::part(content) - Checked item indicator
-
vaadin-menu-bar-item[menu-item-checked]::part(checkmark) - Checked item indicator icon
-
vaadin-menu-bar-item[menu-item-checked]::part(checkmark)::before - Submenu indicator icon
-
vaadin-menu-bar-item::after - Separator element
-
vaadin-menu-bar-overlay[role="separator"]
Item States
- Hovered item
-
vaadin-menu-bar-item:hover - Focused item
-
vaadin-menu-bar-item[focused] - Disabled item
-
vaadin-menu-bar-item[disabled] - Item with a nested sub-menu
-
vaadin-menu-bar-item[aria-haspopup] - Item with expanded sub-menu
-
vaadin-menu-bar-item[expanded] - Checked item
-
vaadin-menu-bar-item[menu-item-checked]