Skip to main content
The Menu component provides a dropdown menu with support for items, groups, checkboxes, radio buttons, and nested submenus.

​
Installation

import {
  MenuRoot,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuPopup,
  MenuItem,
  MenuSeparator,
  MenuGroup,
  MenuGroupLabel,
} from "@craftdotui/baseui/components/menu";

​
Usage

<MenuRoot>
  <MenuTrigger>
    <Button>Open Menu</Button>
  </MenuTrigger>
  
  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <MenuItem>New File</MenuItem>
        <MenuItem>Open</MenuItem>
        <MenuSeparator />
        <MenuItem>Save</MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</MenuRoot>

​
Components

​
MenuRoot

​
open
boolean
Controlled open state.
​
onOpenChange
function
Callback when state changes.

​
MenuTrigger

Element that triggers the menu.

​
MenuItem

​
disabled
boolean
Disable the menu item.
​
inset
boolean
Add left padding for alignment with checkbox/radio items.

​
MenuCheckboxItem

​
checked
boolean
Checked state.
​
onCheckedChange
function
Callback when checked state changes.
Menu item with checkbox.

​
MenuRadioItem

​
value
string
Radio value.
Menu item with radio button.

​
MenuRadioGroup

​
value
string
Selected radio value.
​
onValueChange
function
Callback when selection changes.
Container for radio items.

​
Examples

​
Basic Menu

<MenuRoot>
  <MenuTrigger>
    <Button>File</Button>
  </MenuTrigger>
  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <MenuItem>New</MenuItem>
        <MenuItem>Open</MenuItem>
        <MenuItem>Save</MenuItem>
        <MenuSeparator />
        <MenuItem>Exit</MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</MenuRoot>

​
With Groups

import { MenuGroup, MenuGroupLabel } from "@craftdotui/baseui/components/menu";

<MenuPopup>
  <MenuGroup>
    <MenuGroupLabel>File</MenuGroupLabel>
    <MenuItem>New</MenuItem>
    <MenuItem>Open</MenuItem>
  </MenuGroup>
  <MenuSeparator />
  <MenuGroup>
    <MenuGroupLabel>Edit</MenuGroupLabel>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
  </MenuGroup>
</MenuPopup>

​
With Checkboxes

import { MenuCheckboxItem } from "@craftdotui/baseui/components/menu";

<MenuPopup>
  <MenuCheckboxItem checked onCheckedChange={() => {}}>
    Show Toolbar
  </MenuCheckboxItem>
  <MenuCheckboxItem>
    Show Sidebar
  </MenuCheckboxItem>
</MenuPopup>

​
With Radio Group

import { MenuRadioGroup, MenuRadioItem } from "@craftdotui/baseui/components/menu";

<MenuPopup>
  <MenuRadioGroup value="light">
    <MenuRadioItem value="light">Light</MenuRadioItem>
    <MenuRadioItem value="dark">Dark</MenuRadioItem>
    <MenuRadioItem value="system">System</MenuRadioItem>
  </MenuRadioGroup>
</MenuPopup>

​
With Submenu

import { MenuSubmenuRoot, MenuSubmenuTrigger } from "@craftdotui/baseui/components/menu";

<MenuPopup>
  <MenuItem>New File</MenuItem>
  <MenuSubmenuRoot>
    <MenuSubmenuTrigger>Open Recent</MenuSubmenuTrigger>
    <MenuPortal>
      <MenuPositioner>
        <MenuPopup>
          <MenuItem>file1.txt</MenuItem>
          <MenuItem>file2.txt</MenuItem>
        </MenuPopup>
      </MenuPositioner>
    </MenuPortal>
  </MenuSubmenuRoot>
</MenuPopup>

​
With Shortcuts

import { MenuShortcut } from "@craftdotui/baseui/components/menu";

<MenuItem>
  Save
  <MenuShortcut>⌘S</MenuShortcut>
</MenuItem>

​
Accessibility

  • Built on @base-ui/react for ARIA compliance
  • Keyboard navigation (Arrow keys, Home, End)
  • Type-ahead search
  • Focus management
  • Escape key to close

Build docs developers (and LLMs) love

Get started for freeTalk to us