Menu
AlphaAn accessible dropdown menu (action menu) with keyboard navigation, sub-items, and separators.
Import
import { ActionMenu } from "@compa11y/react";Usage
Example.tsx
import { ActionMenu, Button } from "@compa11y/react";
function Example() {
return (
<ActionMenu>
<ActionMenu.Trigger>
<Button variant="outline">Actions</Button>
</ActionMenu.Trigger>
<ActionMenu.Content>
<ActionMenu.Item onSelect={() => console.log("Edit")}>
Edit
</ActionMenu.Item>
<ActionMenu.Item onSelect={() => console.log("Duplicate")}>
Duplicate
</ActionMenu.Item>
<ActionMenu.Separator />
<ActionMenu.Item onSelect={() => console.log("Delete")}>
Delete
</ActionMenu.Item>
</ActionMenu.Content>
</ActionMenu>
);
}Features
- Full keyboard navigation
- Arrow key traversal
- Type-ahead search
- Separator support
- Close on select or Escape
- Compound component API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | Menu trigger and content |
Sub-components
ActionMenu.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | Trigger element |
ActionMenu.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | Menu items |
ActionMenu.Item
| Prop | Type | Default | Description |
|---|---|---|---|
onSelect | () => void | - | Called when item is selected |
disabled | boolean | false | Disables the item |
children* | ReactNode | - | Item content |
ActionMenu.Separator
Keyboard Interactions
Accessibility
All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.
| Key | Action |
|---|---|
| Enter / Space | Opens menu or selects focused item |
| ArrowDown | Opens menu / moves to next item |
| ArrowUp | Moves to previous item |
| Home | Moves to first item |
| End | Moves to last item |
| Escape | Closes the menu |