styling.adoc

title	Styling
page-title	How to style the Context Menu component | Vaadin components
description	Styling API reference for the Context Menu component.
meta-description	Customize the Vaadin Context Menu component for an intuitive user interface.
order	50

Context Menu Styling

../_styling-section-theming-props.adoc

Menu

Property	Supported by
--vaadin-context-menu-offset-bottom	Aura, Lumo
--vaadin-context-menu-offset-end	Aura, Lumo
--vaadin-context-menu-offset-start	Aura, Lumo
--vaadin-context-menu-offset-top	Aura, Lumo
--vaadin-item-overlay-padding	Aura

../_styling-section-theming-props.adoc

../_styling-section-theming-props.adoc

../_styling-section-intros.adoc

Root element

vaadin-context-menu

Parts

Overlay background

vaadin-context-menu::part(overlay)

Overlay content wrapper

vaadin-context-menu::part(content)

Items

Item element

vaadin-context-menu-item

Item content wrapper

vaadin-context-menu-item::part(content)

Item selection indicator

vaadin-context-menu-item::part(checkmark)

Item selection indicator icon

vaadin-context-menu-item::part(checkmark)::before

Submenu indicator icon

vaadin-context-menu-item::after

Separator

vaadin-context-menu-list-box [role="separator"]

Item States

Selected item

vaadin-context-menu-item[selected]

Focused item

vaadin-context-menu-item[focused]

Hovered item

vaadin-context-menu-item:hover

Pressed item

vaadin-context-menu-item[active]

Disabled item

vaadin-context-menu-item[disabled]

Item with a nested sub-menu

vaadin-context-menu-item[aria-haspopup]

Item with expanded sub-menu

vaadin-context-menu-item[expanded]