Dropdown Menu

Usage

import { DropdownMenu } from '@wdzyi/ui';

<DropdownMenu
  label='Options'
  align='end'
  items={[
    { label: 'Rename', shortcut: '⌘R', onSelect: rename },
    { label: 'Duplicate', shortcut: '⌘D', onSelect: duplicate },
    'separator',
    { label: 'Delete', shortcut: '⌘⌫', destructive: true, onSelect: remove },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

labelstring

What the button says.

itemsDropdownMenuEntry[]

Each has a label, a shortcut to show on the right and an onSelect. Mark one destructive or disabled. A separator between two draws a hairline.

onSelect(item: DropdownMenuItem) => void

Called with the item that was picked, after its own onSelect.

align'start' | 'end' = 'start'

Which edge of the button the menu lines up with.

open, onOpenChangeboolean, (open: boolean) => void

To open and shut it yourself. Opened this way, it leaves focus where it is.

classNamestring

Added to the button.

Notes

• It grows from its corner nearest the button in 240ms and goes in 140ms. The items follow 24ms apart, the nearest to the button first.
• The arrows, Home and End move the plate, and typing jumps to the next item that starts with what was typed. Enter picks, and Escape or Tab shuts it and hands focus back to the button.
• It floats over the page in a portal, below the button or above it when there’s more room there, and nudged along to stay on screen. Scrolling or resizing that moves the button shuts it.
• The shortcuts are only shown. Listen for the keys yourself if they should work while the menu is shut.
• With reduced motion, it fades in without growing, and the items arrive together.