> Markdown version of [Styling](https://vaadin.com/docs/v24/components/menu-bar/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-menu-bar`

### <a id="states"></a>States

- Disabled

  `vaadin-menu-bar[disabled]`

- Single button visible

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

### <a id="buttons"></a>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`

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

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

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