Components / overlay

overlay · @awesome-ds/react

DropdownMenu

Action menu with menuitem roles.

Rules: rule.a11y.wcag-aa

State matrix

openrequired
closedrequired

Anatomy

  • menu trigger
  • menu popup
  • menu items

Keyboard contract

Arrow keys move, Home/End jump, Enter selects, and Escape closes to the trigger.

Screen-reader contract

Trigger expanded state, menu role, and each menuitem are exposed.

Content rules

  • Use action verbs.
  • Separate destructive actions visually and semantically.

Public API

PropTyperequiredDescription
labelstringrequiredMenu trigger name
itemsDropdownMenuItem[]requiredAvailable actions

Adaptation contracts

RTL
Use logical action alignment and preserve the safe primary/cancel reading order.
High contrast
Separate overlay, surface, focus, and actions with system-color boundaries.
Reduced motion
Open and close instantly or with opacity only; focus timing remains deterministic.

Verification IDs

DropdownMenu/keyboard-select

Live

Live

Copyable example

import { DropdownMenu } from "@awesome-ds/react";

<DropdownMenu label="Actions" items={[{id:'a',label:'Edit'}]} />