Docs

Docs

Menu Bar

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.

const [selectedItem, setSelectedItem] = useState<MenuBarItem>();

const 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" },
];

return (
  <VerticalLayout theme="spacing">
    <MenuBar
      items={items}
      onItemSelected={({ detail: { value } }) => setSelectedItem(value)}
    />
    <div>Clicked item: {selectedItem?.text}</div>
  </VerticalLayout>
);

Overflow

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

<SplitLayout>
  <MenuBar items={items} />
  <div>Move the splitter to see overflow feature</div>
</SplitLayout>

Checkable Menu Items

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

const items = [
  {
    text: "Options",
    children: [
      { text: "Save automatically", checked: true },
      { text: "Notify watchers" },
    ],
  },
];

const itemSelected = ({ detail: { value } }: MenuBarItemSelectedEvent) => {
  const item = value as SubMenuItem;
  item.checked = !item.checked;
};

return <MenuBar items={items} onItemSelected={itemSelected} />;
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.
Important
 You can find more information in the corresponding article on vaadin.com.