Dropdown Menu

role="menu" on a popover="auto" element. Outside-click and Escape dismissal come free from the popover. Arrow-key roving between items is the one part of the WAI-ARIA menu pattern that has to be wired up by hand, there's no native menu element yet.

Usage

import { Button, DropdownMenu, MenuItem, MenuSeparator } from "@kernelui/react";

function ActionsMenu() {
  return (
    <DropdownMenu render={<Button variant="secondary">Actions</Button>}>
      <MenuItem onSelect={() => {}}>Edit</MenuItem>
      <MenuItem onSelect={() => {}}>Duplicate</MenuItem>
      <MenuSeparator />
      <MenuItem destructive onSelect={() => {}}>
        Delete
      </MenuItem>
    </DropdownMenu>
  );
}

Props

Component	Prop	Type
`DropdownMenu`	`render`	the trigger (required)
`MenuItem`	`onSelect`	() => void
`MenuItem`	`destructive`	boolean

Accessibility

Opening moves focus to the first item. Arrow Up/Down, Home, and End move between items. Selecting an item, or pressing Escape, closes the menu.