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.
- 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]