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

# Menu Bar Styling

## <a id="style-variants"></a>Style Variants

The following variants are supported by the Menu Bar:

| Variant                    | Description                                                                                                                                                   | Supported by |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `primary`                  | Corresponds to the primary button variant. Recommended for [drop-down buttons](https://vaadin.com/docs/next/components/menu-bar.md#dropdown-buttons) use case | Aura, Lumo   |
| `tertiary`                 | Corresponds to the tertiary button variant, omitting the background color                                                                                     | Aura, Lumo   |
| `tertiary-inline`          | Corresponds to the tertiary inline button variant                                                                                                             | Lumo         |
| `small`                    | Reduces the size of menu bar buttons                                                                                                                          | Aura, Lumo   |
| `large`                    | Increases the size of menu bar buttons                                                                                                                        | Aura, Lumo   |
| `contrast`                 | Recommended as an additional color option                                                                                                                     | Lumo         |
| `icon`                     | Recommended for icon only menu bar buttons                                                                                                                    | Lumo         |
| `dropdown-indicators`      | Used to visually indicate buttons with sub-menu                                                                                                               | Lumo         |
| `end-aligned`              | Used to align buttons to the end of the menu bar                                                                                                              | Aura, Lumo   |
| `filled` (since undefined) | Uses a solid background color for hovered and active menu items                                                                                               | Aura         |

**Lit** — `menu-bar-styles.ts`

```typescript
<vaadin-menu-bar
  .items="${[{ text: 'Default', children: [{ text: 'Item' }] }]}"
></vaadin-menu-bar>
<vaadin-menu-bar
  theme="tertiary"
  .items="${[{ text: 'Tertiary', children: [{ text: 'Item' }] }]}"
></vaadin-menu-bar>
<vaadin-menu-bar
  theme="primary"
  .items="${[{ text: 'Primary', children: [{ text: 'Item' }] }]}"
></vaadin-menu-bar>
<vaadin-menu-bar
  theme="small"
  .items="${[{ text: 'Small', children: [{ text: 'Item' }] }]}"
></vaadin-menu-bar>
```

**Flow** — `MenuBarStyles.java`

```java
MenuBar menuWithDefaultTheme = new MenuBar();
addItem(menuWithDefaultTheme, "Default");

MenuBar menuWithTertiaryTheme = new MenuBar();
menuWithTertiaryTheme.addThemeVariants(MenuBarVariant.TERTIARY);
addItem(menuWithTertiaryTheme, "Tertiary");

MenuBar menuWithPrimaryTheme = new MenuBar();
menuWithPrimaryTheme.addThemeVariants(MenuBarVariant.PRIMARY);
addItem(menuWithPrimaryTheme, "Primary");

MenuBar menuWithSmallTheme = new MenuBar();
menuWithSmallTheme.addThemeVariants(MenuBarVariant.SMALL);
addItem(menuWithSmallTheme, "Small");
```

**React** — `menu-bar-styles.tsx`

```tsx
<MenuBar items={[{ text: 'Default', children: [{ text: 'Item' }] }]} />
<MenuBar theme="tertiary" items={[{ text: 'Tertiary', children: [{ text: 'Item' }] }]} />
<MenuBar theme="primary" items={[{ text: 'Primary', children: [{ text: 'Item' }] }]} />
<MenuBar theme="small" items={[{ text: 'Small', children: [{ text: 'Item' }] }]} />
```

> **Tip: Customize Default Menu Button Styles**
>
> The standard Menu Button styles can be adjusted using [the Button style properties](https://vaadin.com/docs/next/components/button/styling.md#style-properties). These variants should be used only to differentiate special instances of the component.

### <a id="alignment"></a>Alignment

Top-level items are aligned by default to the start of the Menu Bar. Use instead the `end-aligned` theme variant to align them to the end.

**Lit** — `menu-bar-right-aligned.ts`

```html
<vaadin-menu-bar theme="end-aligned" .items="${this.items}"></vaadin-menu-bar>
```

**Flow** — `MenuBarRightAligned.java`

```java
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.ALIGN_END);
```

**React** — `menu-bar-right-aligned.tsx`

```tsx
<MenuBar theme="end-aligned" items={items} />
```

### <a id="drop-down-indicators"></a>Drop-down Indicators

Menu buttons with sub-menu can be visually identified from items that trigger an action immediately using `dropdown-indicators` theme variant. This is only relevant for Lumo theme, Aura provides dropdown indicators by default.

**Lit** — `menu-bar-drop-down-indicators.ts`

```html
<vaadin-menu-bar .items="${this.items}" theme="dropdown-indicators"></vaadin-menu-bar>
```

**Flow** — `MenuBarDropDownIndicators.java`

```java
MenuBar menuBar = new MenuBar();
// Only for Lumo
menuBar.addThemeVariants(MenuBarVariant.LUMO_DROPDOWN_INDICATORS);
```

**React** — `menu-bar-drop-down-indicators.tsx`

```tsx
return <MenuBar items={items} theme="dropdown-indicators" />;
```

## <a id="styling-menu-items"></a>Styling Menu Items

Individual menu items can be styled by applying custom class names to them, and writing CSS style blocks targeting those class names. Notice that root-level menu items in the Menu Bar are wrapped in `vaadin-menu-bar-button` elements, which inherit the class names from the items within them.

**Lit** — `menu-bar-class-name.ts`

```typescript
@state()
private items = [
  { text: 'View', className: 'custom' },
  { text: 'Edit' },
  {
    text: 'Share',
    children: [{ text: 'By email', className: 'custom' }, { text: 'Get link' }],
  },
];

protected override render() {
  return html`<vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>`;
}
```

**Flow** — `MenuBarClassName.java`

```java
MenuItem view = menuBar.addItem("View");
view.addClassNames("custom");

MenuItem edit = menuBar.addItem("Edit");

MenuItem share = menuBar.addItem("Share");
SubMenu shareSubMenu = share.getSubMenu();

shareSubMenu.addItem("By email").addClassNames("custom");
shareSubMenu.addItem("Get Link");
```

**React** — `menu-bar-class-name.tsx`

```tsx
const items: MenuBarItem[] = [
  { text: 'View', className: 'custom' },
  { text: 'Edit' },
  {
    text: 'Share',
    children: [{ text: 'By email', className: 'custom' }, { text: 'Get link' }],
  },
];

return <MenuBar items={items} />;
```

`menu-bar-class-name.css`

```css
/* Use vaadin-menu-bar-button to style root menu items */
/* Use vaadin-menu-bar-item to style sub-menu items */
vaadin-menu-bar-button.custom,
vaadin-menu-bar-item.custom {
   color: green;
}
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

### <a id="overlay"></a>Overlay

| Property                         | Supported by |
| -------------------------------- | ------------ |
| `--vaadin-item-overlay-padding`  | Aura         |
| `--vaadin-overlay-background`    | Aura         |
| `--vaadin-overlay-border-color`  | Aura         |
| `--vaadin-overlay-border-radius` | Aura         |
| `--vaadin-overlay-border-width`  | Aura         |
| `--vaadin-overlay-shadow`        | Aura         |

### <a id="overlay-items"></a>Overlay Items

| Property                        | Supported by |
| ------------------------------- | ------------ |
| `--vaadin-item-border-radius`   | Aura         |
| `--vaadin-item-checkmark-color` | Aura         |
| `--vaadin-icon-size`            | Aura         |
| `--vaadin-item-gap`             | Aura         |
| `--vaadin-item-height`          | Aura         |
| `--vaadin-item-padding`         | Aura         |
| `--vaadin-focus-ring-width`     | Aura, Lumo   |
| `--vaadin-focus-ring-color`     | Aura, Lumo   |

### <a id="animation"></a>Animation (since V25.3)

The overlay has a built-in opening and closing animation, which is disabled until an animation duration is set. The `closed` properties define the state that the overlay animates from when it opens, and to when it closes. The Aura theme sets these properties for some components. Lumo has its own overlay animations, which these properties don’t affect.

While an animation runs, the component has the `opening` or `closing` state attribute, so separate values can be applied to each direction. The backdrop always fades, and only the opacity is animated when the user prefers reduced motion.

| Property                                     | Value syntax                   | Initial value |
| -------------------------------------------- | ------------------------------ | ------------- |
| `--vaadin-overlay-animation-delay`           | `<time>`                       | `0s`          |
| `--vaadin-overlay-animation-duration`        | `<time>`                       | `0s`          |
| `--vaadin-overlay-animation-timing-function` | `<easing-function>`            | `ease`        |
| `--vaadin-overlay-opacity-closed`            | `<number>`                     | `0`           |
| `--vaadin-overlay-scale-closed`              | `<number>` or `<percentage>`   | `1`           |
| `--vaadin-overlay-transform-closed`          | `<transform-list>`             | `none`        |
| `--vaadin-overlay-translate-closed`          | `<length>+` or `<percentage>+` | `0px`         |

> **Note:** These properties are set on the submenu element, `vaadin-menu-bar-submenu`, not on the `vaadin-menu-bar` root element.

## <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/next/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

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

- Keyboard focused button

  `vaadin-menu-bar-button[focus-ring]`

- 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="sub-menu"></a>Sub-Menu

- Sub-menu element

  `vaadin-menu-bar-submenu`

- Sub-menu background

  `vaadin-menu-bar-submenu::part(overlay)`

- Sub-menu content wrapper

  `vaadin-menu-submenu::part(content)`

- Nested sub-menu

  `vaadin-menu-bar-submenu[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-submenu [role="separator"]`

#### <a id="item-states"></a>Item States

- Hovered item

  `vaadin-menu-bar-item:hover`

- Focused item

  `vaadin-menu-bar-item[focused]`

- Keyboard focused item

  `vaadin-menu-bar-item[focus-ring]`

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