Components / Overlays
Dropdown Menu
A positioned action menu with disabled, checkbox, radio, separator, and submenu primitives.
Available in @kape/react
Interactive example
Use keyboard and pointer input to exercise the public behavior.
Installation and usage
Import the owned Kape primitives and the component stylesheet once.
Dropdown Menu imports
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@kape/react";
import "@kape/react/styles.css";Props
| Prop | Type | Purpose |
|---|---|---|
open / defaultOpen | boolean | Controlled or initial state |
modal | boolean | Focus interaction mode |
dir | ltr | rtl | Reading direction |
Accessibility
Semantics, focus, naming, disabled states, and announcements are preserved by the Kape wrapper and covered by component tests. Supply meaningful visible labels and descriptions.
Keyboard
- Arrow keys
- Moves between enabled items.
- Enter / Space
- Activates or toggles an item.
- Escape
- Closes and restores trigger focus.
Composition and limitations
Compose the exported parts directly; styling implementation details and the underlying headless library are not public API.