Hewn
Components

Components

Menu

Action menu triggered from a button.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add menu

Use Menu for compact action lists. Separators group destructive choices.

Usage

TSX
import { Menu, MenuButton, MenuItem, MenuTrigger } from "@hewnui/ui";

<MenuTrigger>
  <MenuButton>Actions</MenuButton>
  <Menu>
    <MenuItem id="edit">Edit</MenuItem>
    <MenuItem id="archive">Archive</MenuItem>
  </Menu>
</MenuTrigger>

Accessibility

  • MenuTrigger wires aria-haspopup and aria-expanded onto the button and moves focus into the menu when it opens
  • Arrow keys move between items, Home/End jump to the ends, and typeahead matches by first letters
  • Enter or Space fires onAction; Escape closes the menu and returns focus to the trigger
  • Items marked isDisabled are exposed as disabled and cannot be activated
  • MenuSeparator renders role="separator" so groups are announced as distinct

API reference

Props for Menu from @hewnui/ui/menu. Generated from component types — not hand-written.

Prop

Type

On this page