> Markdown version of [Styling](https://vaadin.com/docs/v24/components/context-menu/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="css-selectors"></a>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](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Root element

  `vaadin-context-menu-overlay`

### <a id="parts"></a>Parts

- Overlay background

  `vaadin-context-menu-overlay::part(overlay)`

- Overlay content wrapper

  `vaadin-context-menu-overlay::part(content)`

### <a id="items"></a>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-overlay [role="separator"]`

#### <a id="item-states"></a>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]`