---
title: MenuBar
description: MenuBar
element: vaadin-menu-bar
---

## Description

`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering
the user quick access to a consistent set of commands. Each button can toggle a submenu with
support for additional levels of nested menus.

To create the menu bar, first add the component to the page:

```html
<vaadin-menu-bar></vaadin-menu-bar>
```

And then use [`items`](/elements/vaadin-menu-bar#items) property to initialize the structure:

```js
document.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];
```

### Styling

The following shadow DOM parts are exposed for styling:

Part name         | Description
------------------|----------------
`container`       | The container wrapping menu bar buttons.

The following state attributes are available for styling:

Attribute           | Description
--------------------|----------------------------------
`disabled`          | Set when the menu bar is disabled
`has-single-button` | Set when there is only one button visible

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

### Internal components

In addition to `<vaadin-menu-bar>` itself, the following internal
components are themable:

- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](/elements/vaadin-button).
- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](/elements/vaadin-item).
- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](/elements/vaadin-list-box).
- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](/elements/vaadin-context-menu).

The `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes
on top of the built-in `<vaadin-item>` state attributes:

Attribute  | Description
---------- |-------------
`expanded` | Expanded parent item.

## Properties

### disabled

**Type:** `boolean`

If true, the user cannot interact with this element.

### i18n

**Type:** `MenuBarI18n`

The object used to localize this component. To change the default
localization, replace this with an object that provides all properties, or
just the individual properties you want to change.

The object has the following JSON structure and default values:
```js
{
  moreOptions: 'More options'
}
```

See also: [MenuBarI18n](#menubari18n)

### items

**Type:** `MenuBarItem[]`

Defines a hierarchical structure, where root level items represent menu bar buttons,
and `children` property configures a submenu with items to be opened below
the button on click, Enter, Space, Up and Down arrow keys.

#### Example

```js
menubar.items = [
  {
    text: 'File',
    className: 'file',
    children: [
      {text: 'Open', className: 'file open'}
      {text: 'Auto Save', checked: true},
    ]
  },
  {component: 'hr'},
  {
    text: 'Edit',
    children: [
      {text: 'Undo', disabled: true},
      {text: 'Redo'}
    ]
  },
  {text: 'Help'}
];
```

#### Disabled items

When disabled, menu bar items are rendered as "dimmed".

By default, disabled items are not focusable and don't react to hover.
As a result, they are hidden from assistive technologies, and it's not
possible to show a tooltip to explain why they are disabled. This can be
addressed by enabling several feature flags, which makes disabled items
focusable and hoverable, while still preventing them from being activated:

```js
// Allow focus and hover interactions with disabled menu bar root items (buttons)
window.Vaadin.featureFlags.accessibleDisabledButtons = true;

// Allow focus and hover interactions with disabled menu bar sub-menu items
window.Vaadin.featureFlags.accessibleDisabledMenuItems = true;
```

Both flags must be set before any menu bar is attached to the DOM.

See also: [MenuBarItem](#menubaritem)

### openOnHover

**Type:** `boolean | null | undefined`

If true, the submenu will open on hover (mouseover) instead of click.

### reverseCollapse

**Type:** `boolean | null | undefined`

If true, the buttons will be collapsed into the overflow menu
starting from the "start" end of the bar instead of the "end".

### tabNavigation

**Type:** `boolean | null | undefined`

If true, the top-level menu items is traversable by tab
instead of arrow keys (i.e. disabling roving tabindex)

## Methods

### close

**Type:** `() => void`

Closes the current submenu.

## Events

### item-selected

**Type:** [MenuBarItemSelectedEvent](#menubaritemselectedevent)

Fired when either a submenu item or menu bar button without nested children is clicked.

## Types

### MenuBarI18n

```ts
export interface MenuBarI18n {
  moreOptions?: string;
}
```

### MenuBarItem

```ts
export type MenuBarItem<TItemData extends object = object> = {
  /**
   * Text to be set as the menu button component's textContent.
   */
  text?: string;
  /**
   * Text to be set as the menu button's tooltip.
   * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
   */
  tooltip?: string;
  /**
   * The component to represent the button content.
   * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
   */
  component?: HTMLElement | string;
  /**
   * If true, the button is disabled and cannot be activated.
   */
  disabled?: boolean;
  /**
   * Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
   */
  theme?: string[] | string;
  /**
   * Array of submenu items.
   */
  children?: Array<SubMenuItem<TItemData>>;

  /**
   * Class/classes to be set to the class attribute of the button.
   */
  className?: string;
} & TItemData;
```

### MenuBarItemSelectedEvent

```ts
/**
 * Fired when a submenu item or menu bar button without children is clicked.
 */
export type MenuBarItemSelectedEvent<TItem extends MenuBarItem = MenuBarItem> = CustomEvent<{ value: TItem }>;
```

### SubMenuItem

```ts
export type SubMenuItem<TItemData extends object = object> = {
  text?: string;
  component?: HTMLElement | string;
  disabled?: boolean;
  theme?: string[] | string;
  checked?: boolean;
  className?: string;
  children?: Array<SubMenuItem<TItemData>>;
} & TItemData;
```