@edux-design/menus

Accessible menu primitives built on top of the popover system.

The package exports:

• Menu for either a trigger button menu or a viewport-anchored context menu
• MenuList for the focus-managed menu surface
• MenuGroup, MenuGroupLabel, and MenuSeparator for grouped sections
• MenuItem for actionable rows with optional leading and trailing adornments
• MenuSub, MenuSubTrigger, and MenuSubContent for nested secondary menus

Menus integrate with @edux-design/buttons for triggers and @edux-design/popovers for positioning. Shared overlay and row-emphasis motion comes from @edux-design/tokens.

Installation

pnpm add @edux-design/menus @edux-design/buttons @edux-design/popovers @edux-design/utils
# or
npm install @edux-design/menus @edux-design/buttons @edux-design/popovers @edux-design/utils

Peer deps also include react@^19.1.0 and react-dom@^19.1.0.

Usage

import {
  Menu,
  MenuList,
  MenuGroup,
  MenuItem,
  MenuSub,
  MenuSubTrigger,
  MenuSubContent,
} from "@edux-design/menus";

export function InsertMenu() {
  return (
    <Menu
      button="Insert"
      contentProps={{ className: "min-w-[220px]" }}
      trapFocus={false}
      disableOutsidePointerEvents={false}
      onOpenAutoFocus={(event) => event.preventDefault()}
    >
      <MenuList>
        <MenuItem startAdornment={<span>Aa</span>}>Heading</MenuItem>
        <MenuItem endAdornment={<span>Ctrl+K</span>}>
          Command palette
        </MenuItem>

        <MenuSub>
          <MenuSubTrigger startAdornment={<span>#</span>}>
            Layout
          </MenuSubTrigger>
          <MenuSubContent>
            <MenuList className="min-w-[200px]">
              <MenuItem>Two columns</MenuItem>
              <MenuItem>Three columns</MenuItem>
            </MenuList>
          </MenuSubContent>
        </MenuSub>
      </MenuList>
    </Menu>
  );
}

Grouped sections can either be composed explicitly with MenuGroup, or inferred automatically from group, groupLabel, and groupOrder on direct MenuItem and MenuSub children.

For context-menu use cases, control the menu externally and pass anchorPoint={{ x, y }} from the pointer event instead of rendering a trigger button.

import { useState } from "react";
import { Menu, MenuList, MenuItem } from "@edux-design/menus";

export function CanvasContextMenu() {
  const [anchorPoint, setAnchorPoint] = useState(null);

  return (
    <>
      <div
        onContextMenu={(event) => {
          event.preventDefault();
          setAnchorPoint({ x: event.clientX, y: event.clientY });
        }}
      >
        Right-click me
      </div>

      <Menu
        open={Boolean(anchorPoint)}
        onOpenChange={(nextOpen) => {
          if (!nextOpen) {
            setAnchorPoint(null);
          }
        }}
        anchorPoint={anchorPoint}
      >
        <MenuList>
          <MenuItem onClick={() => setAnchorPoint(null)}>Cut</MenuItem>
          <MenuItem onClick={() => setAnchorPoint(null)}>Copy</MenuItem>
        </MenuList>
      </Menu>
    </>
  );
}

Component API

Menu

• Accepts either a string trigger, which renders an @edux-design/buttons Button, or a custom React node.
• button is optional when using anchorPoint for a triggerless context menu.
• Supports controlled and uncontrolled modes via open, defaultOpen, and onOpenChange.
• Use anchorPoint={{ x, y }} to position the root menu directly from viewport coordinates such as a right-click event.
• Forwards align, side, trapFocus, disableOutsidePointerEvents, and other content props to the underlying popover.
• Applies the shared .eds-motion-overlay recipe from @edux-design/tokens by default.

MenuItem

• Use startAdornment for a leading icon, badge, or label.
• Use endAdornment for a shortcut hint, status badge, or custom trailing content.
• Use disabled to make an item non-interactive.
• Use closeOnSelect={false} when selecting the item should not dismiss the full menu tree.
• Use group, groupLabel, and groupOrder when the list should auto-build grouped sections.
• Uses the shared .eds-motion-row-emphasis recipe from @edux-design/tokens for hover and focus emphasis.

MenuGroup

• Wrap related items in MenuGroup to render a section label and divider without repeating group props on each child.
• Use label for the heading text and order to sort groups when multiple groups are present in one list.
• Use MenuGroupLabel and MenuSeparator directly when you need fully manual structure.

MenuSub

• MenuSub manages a nested secondary menu.
• MenuSubTrigger renders like a normal MenuItem and adds a trailing submenu indicator by default.
• MenuSubContent positions the nested panel to the right of the trigger by default.
• MenuSub also supports group, groupLabel, and groupOrder when it is a direct child of MenuList.

Keyboard behavior

• ArrowDown and ArrowUp loop through items in the active menu list.
• Home and End jump to the first and last enabled items.
• Typeahead moves focus to the next matching item label.
• Enter and Space activate the focused item.
• ArrowRight opens a focused submenu trigger.
• ArrowLeft and Escape close the active submenu and return focus to its trigger.
• Tab closes the menu so focus can leave naturally.
• Selecting a standard MenuItem closes the full open menu tree.

Development

pnpm --filter @edux-design/menus lint
pnpm --filter @edux-design/menus check-types
pnpm --filter @edux-design/menus build

Storybook examples live in src/demos/Menu.stories.jsx.

Notes

• Menu items render as <li role="menuitem"> rows inside a role="menu" list.
• When integrating with routing libraries, keep navigation inside the item onClick.
• Menu animations are applied via the data-[state=open|closed] classes on the popover content.