dropdown-menu

Trigger-anchored action menu with keyboard navigation and typeahead.

A headless dropdown menu (WAI-ARIA menu) with keyboard navigation, typeahead and Floating UI positioning.

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
} from '@fluixi/dropdown-menu';

<DropdownMenu>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuPortal>
    <DropdownMenuContent>
      <DropdownMenuLabel>Edit</DropdownMenuLabel>
      <DropdownMenuItem onSelect={cut}>Cut</DropdownMenuItem>
      <DropdownMenuItem onSelect={copy}>Copy</DropdownMenuItem>
      <DropdownMenuItem disabled>Paste</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem onSelect={remove}>Delete</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenuPortal>
</DropdownMenu>

Opens from the trigger (click, Enter/Space, ArrowDown) and focuses the first item.
Arrow keys move focus (skipping disabled), Home/End jump, and printable keys type-ahead to a matching item.
onSelect runs and the menu closes on click or Enter/Space; Escape, outside pointer down and Tab close it and restore focus to the trigger.
role="menu"/menuitem, aria-haspopup, aria-expanded; positioned with data-placement.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

dropdown-menu