Morphing Menu

Usage

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

<MorphMenu
  label='New'
  heading='Create'
  align='end'
  items={[
    { label: 'Page', hint: 'A blank page to write in', icon: <PageIcon />, onSelect: newPage },
    { label: 'Folder', hint: 'Keep things together', icon: <FolderIcon />, onSelect: newFolder },
  ]}
/>

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

Props

labelstring

What the button says.

itemsMorphMenuItem[]

Each has a label, a quieter hint under it, a 16px icon and an onSelect.

headingstring

A small heading at the top of the menu, in mono.

iconReactNode = a plus

Before the label on the button.

onSelect(item: MorphMenuItem) => void

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

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

Which of the button’s edges the menu keeps.

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

• The menu is measured as it opens. Its surface is scaled from the button’s box to the menu’s, while its contents are clipped to the same box rather than scaled, so the type never stretches. Both run on one clock: 380ms in, 260ms out.
• The foil fades in the first 120ms, while the box is still small, and the label in the first 140ms, as the items come up a beat apart from the button’s end of the menu.
• It keeps the button’s corner, opening downwards from its top, or upwards from its foot when there’s more room above. Scrolling or resizing that moves the button shuts it at once, since there’s nowhere true to shrink back to.
• The arrows, Home and End move through the items, Enter picks one, and Escape or Tab shuts it and hands focus back to the button.
• With reduced motion, the menu appears and goes in place.