Nested Menu

Usage

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

<NestedMenu
  label='Options'
  align='end'
  items={[
    { label: 'Rename', icon: <PencilIcon />, onSelect: rename },
    { label: 'Duplicate', icon: <CopyIcon />, onSelect: duplicate },
    {
      label: 'Move to',
      icon: <FolderIcon />,
      items: [{ label: 'Projects' }, { label: 'Archive' }, { label: 'Shared' }],
    },
  ]}
  onSelect={(item, parent) => parent && moveTo(item.label)}
/>

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

Props

labelstring = 'Options'

What the button says.

itemsNestedMenuEntry[] = Rename, Duplicate, Move to

Each has a label, a 16px icon and an onSelect, and can be disabled. One with items of its own opens them as a submenu, one level deep.

onSelect(item: NestedMenuItem, parent?: NestedMenuEntry) => void

Called with the item that was picked, after its own onSelect, and the item whose submenu it was in.

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

• Both menus grow from their corner nearest what opened them, from 97% in 250ms, and shrink to 99% in 150ms. The button and the items press to 97% over 150ms, an item lights up in 150ms, and the chevrons don’t move.
• Resting on Move to opens its submenu at once. Leaving the row inside the triangle from the pointer to the submenu’s near edge keeps it open for 300ms, and each item crossed on the way starts the wait again, so a diagonal path gets there. Anywhere else, it shuts straight away.
• The arrows, Home and End move through a list. The right arrow opens a submenu on its first item and the left one comes back to its row, Enter picks, and Escape shuts both and hands focus back to the button.
• Both float over the page in portals, placed from the button and the row: the menu below the button, or above it when there’s more room, and the submenu to the right, or to the left when there’s no room.
• Adapted from Menu with nested items by Builder on the transitions.dev community. With reduced motion, the menus come and go at once and nothing presses in, as in the original.