Docs

Documentation versions (currently viewingVaadin 24)

Menu Bar

Styling API reference for the Menu Bar component.

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

States

Disabled

vaadin-menu-bar[disabled]

Single button visible

vaadin-menu-bar[has-single-button]

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]