Menubar

An application menu bar hosting a horizontal row of menus with keyboard navigation.

Basic

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Menu, MenuContent, MenuItem, MenuSeparator } from "@makeplane/propel/components/menu";
import { Menubar, MenubarTrigger, MenubarTriggerLabel } from "@makeplane/propel/components/menubar";
import {
  Copy,
  FilePen,
  FilePlus,
  FolderOpen,
  Pencil,
  Redo2,
  Save,
  Scissors,
  Undo2,
} from "lucide-react";

export default function BasicDemo() {
  return (
    <Menubar>
      <Menu>
        <MenubarTrigger>
          <Icon icon={FilePen} tint="secondary" />
          <MenubarTriggerLabel>File</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
          <MenuSeparator />
          <MenuItem icon={<Icon icon={Save} tint="secondary" />} label="Save" />
        </MenuContent>
      </Menu>
      <Menu>
        <MenubarTrigger>
          <Icon icon={Pencil} tint="secondary" />
          <MenubarTriggerLabel>Edit</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem icon={<Icon icon={Undo2} tint="secondary" />} label="Undo" />
          <MenuItem icon={<Icon icon={Redo2} tint="secondary" />} label="Redo" />
          <MenuSeparator />
          <MenuItem icon={<Icon icon={Scissors} tint="secondary" />} label="Cut" />
          <MenuItem icon={<Icon icon={Copy} tint="secondary" />} label="Copy" />
        </MenuContent>
      </Menu>
    </Menubar>
  );
}

Submenu

A menubar menu can nest submenus with MenuSubmenu — each row opens a nested MenuSubmenuContent of options.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuSubmenu,
  MenuSubmenuContent,
  MenuSubmenuTrigger,
} from "@makeplane/propel/components/menu";
import { Menubar, MenubarTrigger, MenubarTriggerLabel } from "@makeplane/propel/components/menubar";
import {
  FileOutput,
  FilePlus,
  FolderOpen,
  LayoutGrid,
  Printer,
  ZoomIn,
  ZoomOut,
} from "lucide-react";

export default function SubmenuDemo() {
  return (
    <Menubar>
      <Menu>
        <MenubarTrigger>
          <MenubarTriggerLabel>File</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
          <MenuSeparator />
          <MenuSubmenu>
            <MenuSubmenuTrigger icon={<Icon icon={FileOutput} tint="secondary" />} label="Export" />
            <MenuSubmenuContent sizing="sm">
              <MenuItem label="PDF" />
              <MenuItem label="PNG" />
              <MenuItem label="SVG" />
            </MenuSubmenuContent>
          </MenuSubmenu>
          <MenuSeparator />
          <MenuItem icon={<Icon icon={Printer} tint="secondary" />} label="Print…" />
        </MenuContent>
      </Menu>
      <Menu>
        <MenubarTrigger>
          <MenubarTriggerLabel>View</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem icon={<Icon icon={ZoomIn} tint="secondary" />} label="Zoom in" />
          <MenuItem icon={<Icon icon={ZoomOut} tint="secondary" />} label="Zoom out" />
          <MenuSeparator />
          <MenuSubmenu>
            <MenuSubmenuTrigger icon={<Icon icon={LayoutGrid} tint="secondary" />} label="Layout" />
            <MenuSubmenuContent sizing="sm">
              <MenuItem label="Single page" />
              <MenuItem label="Two pages" />
              <MenuItem label="Continuous" />
            </MenuSubmenuContent>
          </MenuSubmenu>
        </MenuContent>
      </Menu>
    </Menubar>
  );
}

Disabled

Setting disabled on a Menu root grays out its trigger and blocks it from opening, while sibling menus keep working.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Menu, MenuContent, MenuItem, MenuSeparator } from "@makeplane/propel/components/menu";
import { Menubar, MenubarTrigger, MenubarTriggerLabel } from "@makeplane/propel/components/menubar";
import { FilePlus, FolderOpen, Save } from "lucide-react";

export default function DisabledDemo() {
  return (
    <Menubar>
      <Menu>
        <MenubarTrigger>
          <MenubarTriggerLabel>File</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem icon={<Icon icon={FilePlus} tint="secondary" />} label="New file" />
          <MenuItem icon={<Icon icon={FolderOpen} tint="secondary" />} label="Open…" />
          <MenuSeparator />
          <MenuItem icon={<Icon icon={Save} tint="secondary" />} label="Save" />
        </MenuContent>
      </Menu>
      <Menu disabled>
        <MenubarTrigger>
          <MenubarTriggerLabel>Help</MenubarTriggerLabel>
        </MenubarTrigger>
        <MenuContent sizing="sm">
          <MenuItem label="Documentation" />
          <MenuItem label="Keyboard shortcuts" />
        </MenuContent>
      </Menu>
    </Menubar>
  );
}

Installation

import { Menubar, MenubarTrigger, MenubarTriggerLabel } from "@makeplane/propel/components/menubar";

Props

Menubar

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenubarState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.