DropdownMenu

Usage examples

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@rookcom/monarch-react';

// PencilIcon, TrashIcon: demo icons from the docs site; use your own.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Document</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem icon={<PencilIcon />} shortcut="E">
      Edit
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem tone="danger" icon={<TrashIcon />}>
      Move to trash
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Purpose

A list of actions or options that opens from a trigger button.

Design principles

• tone="danger" for destructive items, paired with a confirmation step (ConfirmDialog). The whole item, icon included, takes the danger colour, so the tone does not rely on the label alone.
• Destructive items go last, after a separator, so they are not hit by accident.
• Shortcut hints are display only; the app binds the keys.

API reference

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '@rookcom/monarch-react';

Root, Trigger, Group, RadioGroup and Sub are the Radix DropdownMenu parts.

Content defaults to align="start" and sideOffset={4} and renders in a portal.

With asChild, DropdownMenuItem renders its child (for example a link) and ignores icon and shortcut.

Generated from the TypeScript declarations of packages/react/src/components/overlays/dropdown-menu.

Properties

Variants

States

Interaction behaviour

• Selecting an item calls onSelect and closes the menu.
• Sub-menus open from DropdownMenuSubTrigger.
• To confirm a destructive item, open a ConfirmDialog from its onSelect; the menu closes first and the dialog returns focus to the menu trigger.
• Controlled with open + onOpenChange, or uncontrolled (defaultOpen).

Keyboard support

Accessibility

Role

menu, menuitem, menuitemcheckbox, menuitemradio

Accessible name

The trigger’s label.

• Item icons and shortcut hints are aria-hidden.
• A destructive item is not announced as such by tone alone: name the action clearly ("Delete ticket").

Responsive behaviour

• Menus are at least 12rem and at most min(22rem, 100vw - 2rem) wide, so they fit a 320px screen.
• Radix flips the menu to the other side and shifts it along the edge when it would leave the viewport (avoidCollisions, on by default); pass collisionPadding to keep a margin.
• Items are at least --mn-control-sm tall.

Theme support

• Styles are the shared .mn-menu rules in styles/menu.css (also used by Select and Combobox); semantic tokens only.

Do and don't

Related components

• Select: Choosing one value for a form field.
• Popover: Arbitrary floating content.
• Breadcrumb: Uses a DropdownMenu for collapsed levels.
• ConfirmDialog: The confirmation step for a destructive item.

Dependencies

Testing coverage

• Opens from the keyboard and focuses the first item; ArrowDown moves; Enter selects and closes.
• No axe violations in the open menu (jsdom).
• Destructive items expose data-tone="danger", hide their icon from assistive technology, are reached with End and selected with Enter.
• Renders on the server (closed).

Tests: packages/react/src/components/overlays/dropdown-menu