Menu Bar

Styles
Overflow
Menu Item Features
Dividers
Open on Hover
Tooltips
Keyboard Usage
Drop-down and "Combo" Buttons
Internationalization (i18n)
Best Practices
Related Components

Menu Bar is a horizontal button bar with hierarchical drop-down menus. Menu items can trigger an action, open a menu, or work as a toggle.

Open in a
new tab

Source code

menu-bar-basic.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import type { MenuBarItem, MenuBarItemSelectedEvent } from '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { text: 'View' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      text: 'Move',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { text: 'Duplicate' },
  ];

  @state()
  private selectedItem?: MenuBarItem;

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar
        .items="${this.items}"
        @item-selected="${this.itemSelected}"
      ></vaadin-menu-bar>

      <div>Clicked item: ${this.selectedItem?.text}</div>
      <!-- end::snippethtml[] -->
    `;
  }

  itemSelected(e: MenuBarItemSelectedEvent) {
    this.selectedItem = e.detail.value;
  }
}
MenuBarBasic.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-basic")
public class MenuBarBasic extends Div {

    public MenuBarBasic() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        Text selected = new Text("");
        ComponentEventListener<ClickEvent<MenuItem>> listener = e -> selected
                .setText(e.getSource().getText());
        Div message = new Div(new Text("Clicked item: "), selected);

        menuBar.addItem("View", listener);
        menuBar.addItem("Edit", listener);

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook", listener);
        socialMediaSubMenu.addItem("Twitter", listener);
        socialMediaSubMenu.addItem("Instagram", listener);
        shareSubMenu.addItem("By email", listener);
        shareSubMenu.addItem("Get Link", listener);

        MenuItem move = menuBar.addItem("Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder", listener);
        moveSubMenu.addItem("To trash", listener);

        menuBar.addItem("Duplicate", listener);
        // end::snippet[]

        add(menuBar, message);
    }

}

Styles

Default Variants

The following variants are available to adjust the appearance of the component:

Open in a
new tab

Source code

menu-bar-styles.ts
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-styles')
export class Example extends LitElement {
  static override styles = css`
    vaadin-menu-bar {
      display: inline-block;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
MenuBarStyles.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-styles")
public class MenuBarStyles extends Div {
    public MenuBarStyles() {
        // tag::snippet[]
        MenuBar menuWithDefaultTheme = new MenuBar();
        addItem(menuWithDefaultTheme, "Default");

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

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

        MenuBar menuWithSmallTheme = new MenuBar();
        menuWithSmallTheme.addThemeVariants(MenuBarVariant.LUMO_SMALL);
        addItem(menuWithSmallTheme, "Small");
        // end::snippet[]

        setInlineBlock(menuWithDefaultTheme);
        setInlineBlock(menuWithTertiaryTheme);
        setInlineBlock(menuWithPrimaryTheme);
        setInlineBlock(menuWithSmallTheme);

        add(menuWithDefaultTheme, menuWithTertiaryTheme, menuWithPrimaryTheme,
                menuWithSmallTheme);
    }

    private void addItem(MenuBar menuItem, String label) {
        menuItem.addItem(label).getSubMenu().addItem("Item");
    }

    private void setInlineBlock(MenuBar menuBar) {
        menuBar.getStyle().set("display", "inline-block");
    }

}

Variant	Usage recommendations
Tertiary	Corresponds to the tertiary button variant, omitting the background color.
Primary	Corresponds to the primary button variant. As only one primary action should be presented in the same part of the UI, this should be used only for drop-down button use cases.
Small	Compact variant. Can be combined with Tertiary and Primary.

Variant

Usage recommendations

Tertiary

Corresponds to the tertiary button variant, omitting the background color.

Primary

Corresponds to the primary button variant. As only one primary action should be presented in the same part of the UI, this should be used only for drop-down button use cases.

Small

Compact variant. Can be combined with Tertiary and Primary.

Tip	Default menu button styles can be customized The standard Menu Button styles can be adjusted using theme features. These variants should be used only to differentiate special instances of the component.

Alignment

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

Open in a
new tab

Source code

menu-bar-right-aligned.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-right-aligned')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

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

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-menu-bar theme="end-aligned" .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippet[] -->
    `;
  }
}
MenuBarRightAligned.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-right-aligned")
public class MenuBarRightAligned extends Div {

    public MenuBarRightAligned() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.addThemeVariants(MenuBarVariant.LUMO_END_ALIGNED);
        // end::snippet[]

        menuBar.addItem("View");
        menuBar.addItem("Edit");
        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        add(menuBar);
    }

}

An individual menu item can be styled using a custom variant.

To style a root-level item, create a custom variant for the vaadin-menu-bar-button component.

To style a sub-menu item, create a custom variant for the vaadin-context-menu-item component.

See Vaadin Component Variants for details of how to add style sheets for these components.

Open in a
new tab

Source code

menu-bar-custom-theme.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-custom-theme')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private items = [
    { text: 'View', theme: 'custom-theme' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [{ text: 'By email', theme: 'custom-theme' }, { text: 'Get link' }],
    },
  ];

  protected override render() {
    return html`<vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>`;
  }
  // end::snippet[]
}
vaadin-context-menu-item.css:host([theme~='custom-theme']) {
    text-transform: uppercase;
}
vaadin-context-menu-item.css
vaadin-menu-bar-button.css:host([theme~='custom-theme']) {
    text-transform: uppercase;
}
vaadin-menu-bar-button.css
MenuBarCustomTheme.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-custom-theme")
public class MenuBarCustomTheme extends Div {

    public MenuBarCustomTheme() {
        MenuBar menuBar = new MenuBar();

        // tag::snippet[]
        MenuItem view = menuBar.addItem("View");
        view.addThemeNames("custom-theme");

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

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        shareSubMenu.addItem("By email").addThemeNames("custom-theme");
        shareSubMenu.addItem("Get Link");
        // end::snippet[]

        add(menuBar);
    }

}
vaadin-context-menu-item.css:host([theme~='custom-theme']) {
    text-transform: uppercase;
}
vaadin-context-menu-item.css
vaadin-menu-bar-button.css:host([theme~='custom-theme']) {
    text-transform: uppercase;
}
vaadin-menu-bar-button.css

Overflow

Items that don’t fit into the current width of the menu bar collapse automatically into an overflow menu at the end:

Open in a
new tab

Source code

menu-bar-overflow.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import '@vaadin/split-layout';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-overflow')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { text: 'View' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      text: 'Move',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { text: 'Duplicate' },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-split-layout>
        <vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>
        <div>Move the splitter to see overflow feature</div>
      </vaadin-split-layout>
      <!-- end::snippethtml[] -->
    `;
  }
}
MenuBarOverflow.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;

@Route("menu-bar-overflow")
public class MenuBarOverflow extends Div {
    public MenuBarOverflow() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        addItems(menuBar);
        Div div = new Div();
        div.setText("Move the splitter to see overflow feature");

        SplitLayout splitLayout = new SplitLayout(menuBar, div);
        // end::snippet[]

        add(splitLayout);
    }

    private void addItems(MenuBar menuBar) {
        menuBar.addItem("View");
        menuBar.addItem("Edit");

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook");
        socialMediaSubMenu.addItem("Twitter");
        socialMediaSubMenu.addItem("Instagram");
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        MenuItem move = menuBar.addItem("Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder");
        moveSubMenu.addItem("To trash");

        menuBar.addItem("Duplicate");
    }

}

Icons

Menu items can have icons in addition to, or instead of text.

Open in a
new tab

Source code

menu-bar-icons.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-icons')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    {
      component: this.createItem('share', 'Share'),
      children: [
        { component: this.createItem('share', 'By email', true) },
        { component: this.createItem('link', 'Get link', true) },
      ],
    },
    {
      component: this.createItem('copy', ''),
    },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar theme="icon" .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }

  createItem(iconName: string, text: string, isChild = false) {
    const item = document.createElement('vaadin-context-menu-item');
    const icon = document.createElement('vaadin-icon');

    if (isChild) {
      icon.style.width = 'var(--lumo-icon-size-s)';
      icon.style.height = 'var(--lumo-icon-size-s)';
      icon.style.marginRight = 'var(--lumo-space-s)';
    }

    if (iconName === 'copy') {
      item.setAttribute('aria-label', 'duplicate');
    }

    icon.setAttribute('icon', `vaadin:${iconName}`);
    item.appendChild(icon);
    if (text) {
      item.appendChild(document.createTextNode(text));
    }
    return item;
  }
}
MenuBarIcons.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.contextmenu.HasMenuItems;
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-icons")
public class MenuBarIcons extends Div {
    public MenuBarIcons() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);
        MenuItem share = createIconItem(menuBar, VaadinIcon.SHARE, "Share",
                null);
        SubMenu shareSubMenu = share.getSubMenu();
        createIconItem(shareSubMenu, VaadinIcon.SHARE, "By Email", null, true);
        createIconItem(shareSubMenu, VaadinIcon.LINK, "Get link", null, true);
        createIconItem(menuBar, VaadinIcon.COPY, null, "duplicate");
        // end::snippet[]
        add(menuBar);
    }

    private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName,
            String label, String ariaLabel) {
        return createIconItem(menu, iconName, label, ariaLabel, false);
    }

    private MenuItem createIconItem(HasMenuItems menu, VaadinIcon iconName,
            String label, String ariaLabel, boolean isChild) {
        Icon icon = new Icon(iconName);

        if (isChild) {
            icon.getStyle().set("width", "var(--lumo-icon-size-s)");
            icon.getStyle().set("height", "var(--lumo-icon-size-s)");
            icon.getStyle().set("marginRight", "var(--lumo-space-s)");
        }

        MenuItem item = menu.addItem(icon, e -> {
        });

        if (ariaLabel != null) {
            item.getElement().setAttribute("aria-label", ariaLabel);
        }

        if (label != null) {
            item.add(new Text(label));
        }

        return item;
    }

}

Usage recommendations:

Use icons sparingly. Most actions are difficult to represent reliably with icons. The benefit of icons in addition to text should be weighed against the visual distractions it may create.
Menu items in drop-down menus should always have text labels.
Icon-only menu buttons should be used primarily for common recurring actions with highly standardized, universally understood icons, such a cross for "close".
Icon-only menu buttons should provide a textual alternative for screen readers using the aria-label attribute or tooltips.

Menu Bars with icon-only top-level items can use the Tertiary Inline style variant to reduce the horizontal padding around the icons.

Open in a
new tab

Source code

menu-bar-icon-only.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-icon-only')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { component: this.createItem('eye', 'View') },
    { component: this.createItem('pencil', 'Edit') },
    {
      component: this.createItem('share', 'Share'),
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      component: this.createItem('folder', 'Move'),
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { component: this.createItem('copy', 'Duplicate') },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar theme="tertiary-inline" .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }

  createItem(iconName: string, ariaLabel: string) {
    const item = document.createElement('vaadin-context-menu-item');
    const icon = document.createElement('vaadin-icon');
    item.setAttribute('aria-label', ariaLabel);
    icon.setAttribute('icon', `vaadin:${iconName}`);
    item.appendChild(icon);
    return item;
  }
}
MenuBarIconOnly.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-icon-only")
public class MenuBarIconOnly extends Div {
    public MenuBarIconOnly() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);

        createIconItem(menuBar, VaadinIcon.EYE, "View");
        createIconItem(menuBar, VaadinIcon.PENCIL, "Edit");

        MenuItem share = createIconItem(menuBar, VaadinIcon.SHARE, "Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook");
        socialMediaSubMenu.addItem("Twitter");
        socialMediaSubMenu.addItem("Instagram");
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        MenuItem move = createIconItem(menuBar, VaadinIcon.FOLDER, "Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder");
        moveSubMenu.addItem("To trash");

        createIconItem(menuBar, VaadinIcon.COPY, "Duplicate");
        // end::snippet[]
        add(menuBar);
    }

    private MenuItem createIconItem(MenuBar menu, VaadinIcon iconName,
            String ariaLabel) {
        Icon icon = new Icon(iconName);
        MenuItem item = menu.addItem(icon);
        item.getElement().setAttribute("aria-label", ariaLabel);

        return item;
    }

}

Warning

Other components in menu items

While it’s technically possible to put any UI element in a menu item, this can cause problems for accessibility as it may not be possible to focus them, and they may not be interpreted correctly by assistive technologies.

Disabled Items

Menu items can be disabled to show that they are unavailable currently.

Open in a
new tab

Source code

menu-bar-disabled.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-disabled')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private items = [
    { text: 'View' },
    { text: 'Edit', disabled: true },
    {
      text: 'Share',
      children: [{ text: 'By email', disabled: true }, { text: 'Get link' }],
    },
  ];
  // end::snippet[]

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }
}
MenuBarDisabled.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("menu-bar-disabled")
public class MenuBarDisabled extends Div {
    public MenuBarDisabled() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();

        menuBar.addItem("View");
        MenuItem edit = menuBar.addItem("Edit");
        edit.setEnabled(false);

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        shareSubMenu.addItem("By email").setEnabled(false);
        shareSubMenu.addItem("Get Link");
        // end::snippet[]

        add(menuBar);
    }

}

Menu items in drop-down menus can be configured as checkable to toggle options on and off.

Open in a
new tab

Source code

menu-bar-checkable.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import type { MenuBarItemSelectedEvent, SubMenuItem } from '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-checkable')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    {
      text: 'Options',
      children: [{ text: 'Save automatically', checked: true }, { text: 'Notify watchers' }],
    },
  ];

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

  itemSelected(e: MenuBarItemSelectedEvent) {
    const item = e.detail.value;
    (item as SubMenuItem).checked = !(item as SubMenuItem).checked;
  }
}
MenuBarCheckable.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-checkable")
public class MenuBarCheckable extends Div {
    public MenuBarCheckable() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        MenuItem options = menuBar.addItem("Options");
        SubMenu subItems = options.getSubMenu();

        MenuItem saveItem = subItems.addItem("Save automatically");
        saveItem.setCheckable(true);
        saveItem.setChecked(true);
        MenuItem notifyItem = subItems.addItem("Notify watchers");
        notifyItem.setCheckable(true);
        notifyItem.setChecked(false);

        ComponentEventListener<ClickEvent<MenuItem>> listener = event -> {
            // System.out.println(event.getSource().isChecked());
        };

        saveItem.addClickListener(listener);
        notifyItem.addClickListener(listener);
        // end::snippet[]
        add(menuBar);
    }

}

Note	Not a replacement for radio buttons A Menu Bar with checkable items shouldn’t be used as a replacement for radio buttons in a form.

Dividers

You can use dividers to separate and group related content.

Open in a
new tab

Source code

menu-bar-dividers.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-dividers')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    {
      text: 'Share',
      children: [
        { text: 'Facebook' },
        { text: 'Twitter' },
        { text: 'Instagram' },
        { component: 'hr' },
        { text: 'By email' },
        { text: 'Get link' },
        { component: 'hr' },
        { text: 'Set permissions' },
      ],
    },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }
}
MenuBarDividers.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Hr;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-dividers")
public class MenuBarDividers extends Div {
    public MenuBarDividers() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        MenuItem item = menuBar.addItem("Share");
        SubMenu subMenu = item.getSubMenu();
        subMenu.addItem("Facebook");
        subMenu.addItem("Twitter");
        subMenu.addItem("Instagram");
        subMenu.add(new Hr());
        subMenu.addItem("By email");
        subMenu.addItem("Get link");
        subMenu.add(new Hr());
        subMenu.addItem("Set permissions");
        // end::snippet[]

        add(menuBar);
    }

}

Use dividers sparingly to avoid creating unnecessary visual clutter.

Warning

Content other than menu items not accessible

While it’s technically possible to put any UI element in a drop-down menu, including interactive components, they are not accessible by keyboard or assistive technologies.

Open on Hover

The component can be configured to open drop-down menus on hover, instead of on click.

Open in a
new tab

Source code

menu-bar-open-on-hover.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-open-on-hover')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { text: 'View' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      text: 'Move',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { text: 'Duplicate' },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar .items="${this.items}" open-on-hover></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }
}
MenuBarOpenOnHover.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-open-on-hover")
public class MenuBarOpenOnHover extends Div {
    public MenuBarOpenOnHover() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.setOpenOnHover(true);
        addItems(menuBar);
        // end::snippet[]
        add(menuBar);
    }

    private void addItems(MenuBar menuBar) {
        menuBar.addItem("View");
        menuBar.addItem("Edit");

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook");
        socialMediaSubMenu.addItem("Twitter");
        socialMediaSubMenu.addItem("Instagram");
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        MenuItem move = menuBar.addItem("Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder");
        moveSubMenu.addItem("To trash");

        menuBar.addItem("Duplicate");
    }

}

Tooltips

Tooltips can be configured on top-level items to provide additional information, especially for icon-only items. When a top-level item is disabled, the corresponding tooltip isn’t shown.

Open in a
new tab

Source code

menu-bar-tooltip.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/menu-bar';
import '@vaadin/tooltip';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-tooltip')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private items = [
    {
      component: this.createItem('eye'),
      tooltip: 'View',
    },
    {
      component: this.createItem('pencil'),
      tooltip: 'Edit',
    },
    {
      component: this.createItem('folder'),
      tooltip: 'Move',
    },
    {
      component: this.createItem('copy'),
      tooltip: 'Duplicate',
    },
    {
      component: this.createItem('archive'),
      tooltip: 'Archive',
      disabled: true,
    },
  ];
  // end::snippet[]

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar .items="${this.items}" theme="icon">
        <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
      </vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }

  createItem(iconName: string) {
    const item = document.createElement('vaadin-context-menu-item');
    const icon = document.createElement('vaadin-icon');
    icon.setAttribute('icon', `vaadin:${iconName}`);
    item.appendChild(icon);
    return item;
  }
}
MenuBarTooltip.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-tooltip")
public class MenuBarTooltip extends Div {
    public MenuBarTooltip() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);

        createIconItem(menuBar, VaadinIcon.EYE, "View");
        createIconItem(menuBar, VaadinIcon.PENCIL, "Edit");
        createIconItem(menuBar, VaadinIcon.FOLDER, "Move");
        createIconItem(menuBar, VaadinIcon.COPY, "Duplicate");
        MenuItem archive = createIconItem(menuBar, VaadinIcon.ARCHIVE,
                "Archive");
        archive.setEnabled(false);
        // end::snippet[]
        add(menuBar);
    }

    private MenuItem createIconItem(MenuBar menu, VaadinIcon iconName,
            String tooltipText) {
        Icon icon = new Icon(iconName);
        MenuItem item = menu.addItem(icon, tooltipText);
        return item;
    }

}

See Tooltips documentation for details on tooltip configuration.

Keyboard Usage

Top-Level Items

Interaction	Keyboard Shortcut
Navigate between top-level items.	`Left` and `Right` arrow keys
Open top-level menu.	`Down` / `Space` / `Enter`
Trigger top-level item with a menu.	`Space` / `Enter`

Interaction

Keyboard Shortcut

Navigate between top-level items.

Left and Right arrow keys

Open top-level menu.

Down / Space / Enter

Trigger top-level item with a menu.

Space / Enter

Interaction	Keyboard Shortcut
Navigate between items in a drop-down menu.	`Up` and `Down` arrow keys
Open sub-menu.	`Right` / `Space` / `Enter`
Trigger menu item without a sub-menu.	`Space` / `Enter`
Return to previous menu.	`Left`
Close the drop-down menu.	`Esc`

Interaction

Keyboard Shortcut

Navigate between items in a drop-down menu.

Up and Down arrow keys

Open sub-menu.

Right / Space / Enter

Trigger menu item without a sub-menu.

Space / Enter

Return to previous menu.

Left

Close the drop-down menu.

Esc

A Menu Bar with a single top-level item is essentially a drop-down button. This solution provides a better user experience and better accessibility than a regular Button paired with a Context Menu.

Open in a
new tab

Source code

menu-bar-drop-down.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-drop-down')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    {
      text: 'John Smith',
      children: [
        { text: 'Profile' },
        { text: 'Account' },
        { text: 'Preferences' },
        { component: 'hr' },
        { text: 'Sign out' },
      ],
    },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }
}
MenuBarDropDown.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Hr;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-dropdown")
public class MenuBarDropDown extends Div {
    public MenuBarDropDown() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        MenuItem item = menuBar.addItem("John Smith");
        SubMenu subMenu = item.getSubMenu();
        subMenu.addItem("Profile");
        subMenu.addItem("Account");
        subMenu.addItem("Preferences");
        subMenu.add(new Hr());
        subMenu.addItem("Sign out");
        // end::snippet[]

        add(menuBar);
    }

}

So-called "combo buttons" can be created in a similar way. For example, they can be created to provide a set of variations on an action.

Open in a
new tab

Source code

menu-bar-combo-buttons.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/menu-bar';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-combo-buttons')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { text: 'Save' },
    {
      component: this.createItem(),
      children: [{ text: 'Save as draft' }, { text: 'Save as copy' }, { text: 'Save and publish' }],
    },
  ];

  protected override render() {
    return html`
      <!-- tag::snippethtml[] -->
      <vaadin-menu-bar theme="icon primary" .items="${this.items}"></vaadin-menu-bar>
      <!-- end::snippethtml[] -->
    `;
  }

  private createItem() {
    const item = document.createElement('vaadin-context-menu-item');
    const icon = document.createElement('vaadin-icon');
    item.setAttribute('aria-label', 'Other save options');
    icon.setAttribute('icon', `vaadin:chevron-down`);
    item.appendChild(icon);
    return item;
  }
}
MenuBarComboButtons.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.component.menubar.MenuBarVariant;
import com.vaadin.flow.router.Route;

@Route("menu-bar-combo-buttons")
public class MenuBarComboButtons extends Div {
    public MenuBarComboButtons() {
        // tag::snippet[]
        MenuBar menuBar = new MenuBar();
        menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON,
                MenuBarVariant.LUMO_PRIMARY);
        menuBar.addItem("Save");
        MenuItem item = menuBar.addItem(new Icon(VaadinIcon.CHEVRON_DOWN));
        SubMenu subItems = item.getSubMenu();
        subItems.addItem("Save as draft");
        subItems.addItem("Save as copy");
        subItems.addItem("Save and publish");
        // end::snippet[]
        add(menuBar);
    }

}

Internationalization (i18n)

Menu Bar provides an API for localization. Currently, only the accessible label for the overflow menu button can be customized.

Source code

menu-bar-internationalization.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/menu-bar';
import type { MenuBarI18n } from '@vaadin/menu-bar';
import '@vaadin/split-layout';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('menu-bar-internationalization')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items = [
    { text: 'View' },
    { text: 'Edit' },
    {
      text: 'Share',
      children: [
        {
          text: 'On social media',
          children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
        },
        { text: 'By email' },
        { text: 'Get link' },
      ],
    },
    {
      text: 'Move',
      children: [{ text: 'To folder' }, { text: 'To trash' }],
    },
    { text: 'Duplicate' },
  ];

  protected override render() {
    const customI18n: MenuBarI18n = {
      // Provide accessible label for the overflow menu button
      // to screen readers
      moreOptions: 'More actions',
    };

    return html`<vaadin-menu-bar .i18n="${customI18n}" .items="${this.items}"></vaadin-menu-bar>`;
  }
}
MenuBarInternationalization.javapackage com.vaadin.demo.component.menubar;

import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.menubar.MenuBar;
import com.vaadin.flow.router.Route;

@Route("menu-bar-internationalization")
public class MenuBarInternationalization extends Div {

    public MenuBarInternationalization() {
        MenuBar menuBar = new MenuBar();
        MenuBar.MenuBarI18n customI18n = new MenuBar.MenuBarI18n()
                // Provide accessible label for the overflow menu button
                // to screen readers
                .setMoreOptions("More actions");

        menuBar.setI18n(customI18n);

        menuBar.addItem("View");
        menuBar.addItem("Edit");

        MenuItem share = menuBar.addItem("Share");
        SubMenu shareSubMenu = share.getSubMenu();
        MenuItem onSocialMedia = shareSubMenu.addItem("On social media");
        SubMenu socialMediaSubMenu = onSocialMedia.getSubMenu();
        socialMediaSubMenu.addItem("Facebook");
        socialMediaSubMenu.addItem("Twitter");
        socialMediaSubMenu.addItem("Instagram");
        shareSubMenu.addItem("By email");
        shareSubMenu.addItem("Get Link");

        MenuItem move = menuBar.addItem("Move");
        SubMenu moveSubMenu = move.getSubMenu();
        moveSubMenu.addItem("To folder");
        moveSubMenu.addItem("To trash");

        menuBar.addItem("Duplicate");

        add(menuBar);
    }

}

Best Practices

Menu Bar shouldn’t be used for navigation. Use tabs to switch between content, or anchor elements for regular navigation.
Menu Bar isn’t an input field. Use Select, Combo Box, or Radio Button instead.

Component	Usage recommendations
Button	Regular Button component for individual actions.
Select	Drop-down input field.
Tabs	Tabs should be used to split content into sections that the user can switch between.
Context Menu	A generic drop-down menu that can be triggered from any component.

Component

Usage recommendations

Button

Regular Button component for individual actions.

Select

Drop-down input field.

Tabs

Tabs should be used to split content into sections that the user can switch between.

Context Menu

A generic drop-down menu that can be triggered from any component.

BCC76FD2-FB02-4F71-A6DF-7574CAC1C662

Documentation

Documentation

Menu Bar

Styles

Default Variants

Alignment

Styling Menu Items

Overflow

Menu Item Features

Icons

Disabled Items

Checkable Menu Items

Dividers

Open on Hover

Tooltips

Keyboard Usage

Top-Level Items

Menu-Items

Internationalization (i18n)

Best Practices

Documentation

Styles

Default Variants

Alignment

Styling Menu Items

Overflow

Menu Item Features

Icons

Disabled Items

Checkable Menu Items

Dividers

Open on Hover

Tooltips

Keyboard Usage

Top-Level Items

Menu-Items

Drop-down and "Combo" Buttons

Internationalization (i18n)

Best Practices

Related Components