Menu

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { IconButton, Menu } from '@krackedui/motion';

export function PageMenu() {
  const [wrap, setWrap] = useState(true);
  const [sort, setSort] = useState('edited');
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <IconButton icon="more" label="Page actions" />
      </Menu.Trigger>
      <Menu.Content width={240} align="end">
        <Menu.Item icon="link" shortcut="⌘L">Copy link</Menu.Item>
        <Menu.Item icon="copy" shortcut="⌘D">Duplicate</Menu.Item>
        <Menu.Sub>
          <Menu.SubTrigger icon="share">Share to</Menu.SubTrigger>
          <Menu.SubContent width={180}>
            <Menu.Item>Email</Menu.Item>
            <Menu.Item>Chat</Menu.Item>
          </Menu.SubContent>
        </Menu.Sub>
        <Menu.Separator />
        <Menu.CheckboxItem checked={wrap} onCheckedChange={setWrap}>Wrap text</Menu.CheckboxItem>
        <Menu.Separator />
        <Menu.Label>Sort by</Menu.Label>
        <Menu.RadioGroup value={sort} onValueChange={setSort}>
          <Menu.RadioItem value="edited">Last edited</Menu.RadioItem>
          <Menu.RadioItem value="created">Created</Menu.RadioItem>
          <Menu.RadioItem value="title">Title</Menu.RadioItem>
        </Menu.RadioGroup>
        <Menu.Separator />
        <Menu.Item icon="trash" destructive>Delete</Menu.Item>
      </Menu.Content>
    </Menu.Root>
  );
}

Examples

Checkbox, radio and submenu

Options keep their state outside the menu; submenus open on → or hover.

Search header, toggle rows and footer

header / footer slots sit outside the item list. ToggleItem is the switch row and keeps the menu open.

Static surface

The same look without behavior, for custom pickers and previews.

Composition

<Menu.Root>
  <Menu.Trigger asChild>…</Menu.Trigger>
  <Menu.Content header={<Menu.Search />} footer={<Menu.Footer />}>
    <Menu.Label />
    <Menu.Item />
    <Menu.CheckboxItem />
    <Menu.RadioGroup><Menu.RadioItem /></Menu.RadioGroup>
    <Menu.Sub><Menu.SubTrigger /><Menu.SubContent>…</Menu.SubContent></Menu.Sub>
    <Menu.Separator />
  </Menu.Content>
</Menu.Root>

• Every part also has a flat alias for Server Components: MenuRoot, MenuItem, MenuCheckboxItem…
• MenuSurface, MenuList, MenuRow, MenuLabel, MenuSeparator are the same look without behavior, for pickers that manage focus themselves.

API Reference

Menu.Root

Holds the open state.

Menu.Trigger

The button that opens the menu.

Menu.Content

The floating menu (portalled to body).

Menu.Item

An action row.

Menu.CheckboxItem

An on/off option (menuitemcheckbox) with a trailing checkmark when checked.

Menu.RadioGroup

Groups RadioItems; exactly one is selected.

Menu.RadioItem

One option of a RadioGroup (menuitemradio), checkmark when selected.

Menu.ToggleItem

Motion extra: an on/off row drawn with a switch. Keeps the menu open when toggled.

Menu.Sub

Wraps a submenu (SubTrigger + SubContent).

Menu.SubTrigger

Row that opens a submenu (→ or Enter opens, ← closes). Draws the chevron itself.

Menu.SubContent

The submenu surface (portalled).

Menu.Label / Separator / Group

Section label, hairline separator and a grouping wrapper.

Menu.Search / Menu.Footer

Search: filter field for the header slot (its accessible name defaults to the placeholder). Footer: grey metadata lines for the footer slot.

MenuSurface

Static menu card.

MenuList

Static section (role listbox; give it an aria-label) with 4px padding. A <div>: all its props pass through.

MenuRow

Static row (role option; a toggle row adds aria-checked). A <div>: pass tabIndex={0} to make an actionable row a Tab stop (Enter / Space click it).

MenuSwitch

The purely visual switch drawn by toggle rows.

MenuSearch

Search field for the top of a static menu or Menu.Content header: an <input type="search"> (all input props pass through) in a 12px-padded wrapper. Its accessible name defaults to the placeholder.

SearchField

The same 28px search input without the wrapper padding, for toolbars and custom pickers. All <input> props pass through.

MenuFooter

Grey metadata lines at the bottom of a menu ("130 words", "Edited today"). A <div>: all its props pass through.

MenuLabel / MenuSeparator / MenuBadge

Static section label (12px, secondary), hairline separator (role="separator"), and the accent "New" pill for rows. Plain elements: all HTML props pass through.

Accessibility

• Follows the WAI-ARIA menu button pattern: the trigger has aria-haspopup="menu" and aria-expanded.
• Enter, Space or ↓ on the trigger opens the menu and focuses the first item; ↑ opens it on the last item.
• ↑/↓ move between items (wrapping), Home/End jump to the ends, typing a letter jumps to the matching item.
• Enter or Space activates the item; → opens a submenu, ← or Escape closes it. Escape closes the menu and returns focus to the trigger.
• Checkbox and radio items expose menuitemcheckbox / menuitemradio with aria-checked.
• Static parts: MenuList is a listbox (give it an aria-label) of MenuRow options; a toggle row is an option with aria-checked. Rows are not Tab stops by default and a click keeps focus in the field driving the list (aria-activedescendant pickers); pass tabIndex={0} to make an actionable row a Tab stop that Enter / Space activate.
• Content is collision-aware: it flips and shifts to stay 8px inside the viewport and scrolls when taller than the space left.
• Rows are 28px tall, above the 24px minimum target. Opens and closes with the shared motion layer (styles/motion.css); with prefers-reduced-motion: reduce it only fades.

Usage

• Use for a short list of actions or view options attached to a button ("…", "Sort", "Actions").
• Use CheckboxItem for independent on/off options and RadioGroup + RadioItem for one-of-many choices.
• Mark destructive actions with destructive and put them last, after a separator.
• Don't use a menu to pick a form value: use Select or Combobox, which work with forms and labels.
• Don't put long or searchable lists in a menu: use CommandPalette.
• Shortcut hints are display-only: register the keyboard shortcut yourself.