Menu

Alpha

An 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

Menu component props
PropTypeDefaultDescription
children*ReactNode-Menu trigger and content

Sub-components

ActionMenu.Trigger

ActionMenu.Trigger props
PropTypeDefaultDescription
children*ReactNode-Trigger element

ActionMenu.Content

ActionMenu.Content props
PropTypeDefaultDescription
children*ReactNode-Menu items

ActionMenu.Item

ActionMenu.Item props
PropTypeDefaultDescription
onSelect() => void-Called when item is selected
disabledbooleanfalseDisables 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.
Keyboard shortcuts for Menu
KeyAction
Enter / SpaceOpens menu or selects focused item
ArrowDownOpens menu / moves to next item
ArrowUpMoves to previous item
HomeMoves to first item
EndMoves to last item
EscapeCloses the menu