@edux-design/menus

Accessible menu primitives built on top of the popover system. The package exports:

• Menu – wraps the trigger button + popover content.
• MenuList – focus-managed listbox container.
• MenuItem – keyboard-friendly row with hover/focus styling.

Menus integrate seamlessly with @edux-design/buttons (for triggers) and @edux-design/popovers under the hood.

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, react-dom@^19.1.0.

Usage

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

export function SortMenu() {
  const [open, setOpen] = useState(false);

  return (
    <Menu
      button="Sort"
      open={open}
      onOpenChange={setOpen}
      contentProps={{ className: "min-w-[200px]" }}
    >
      <MenuList>
        <MenuItem onClick={() => console.log("Newest")}>Newest</MenuItem>
        <MenuItem onClick={() => console.log("Oldest")}>Oldest</MenuItem>
        <MenuItem onClick={() => console.log("A → Z")}>A → Z</MenuItem>
      </MenuList>
    </Menu>
  );
}

Features

• Arrow key navigation loops through MenuItems; Enter/Space activate the focused item.
• Escape closes the popover via Radix’ PopoverClose.
• Menu accepts either a string trigger (rendered as a Button) or a custom React node.
• Pass trapFocus, disableOutsidePointerEvents, align, side, etc., to control the underlying popover.

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="button">; if you need semantic <button> or <a> elements, pass asChild or adapt the component.
• When integrating with routing libraries, handle selection inside the onClick of MenuItem.
• Animations are applied via the data-[state=open|closed] classes on PopoverContent; adjust contentProps.className for custom transitions.