Create Menu
betaA DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add create-menunpm packages installed: class-variance-authority, radix-ui.
import { CreateMenu } from "@/components/ui/create-menu";Default
Gallery
Open
Inverted
Stroke
<CreateMenu>
| Prop | Type | Default |
|---|---|---|
alignWhere the panel grows from, relative to the pill. | "start" | "center" | "end" | "center" |
contentClassName | string | — |
cornerRadius of the open panel in px. The row radius derives from it. | number | 28 |
defaultOpen | boolean | — |
dir | "ltr" | "rtl" | — |
iconThe trigger's icon. Decorative; defaults to a plus. Pass | ReactNode | — |
labelThe trigger's visible label, and the menu's name. | ReactNode | "Create" |
modalRadix | boolean | false |
onOpenChange | (open: boolean) => void | — |
open | boolean | — |
panelWidthWidth of the open panel in px. Its height follows the items. | number | 212 |
stroke | boolean | — |
tone | "default" | "inverted" | "default" |
triggerClassName | string | — |
children
| ReactNode | — |
Plus every attribute of <div> except dir.
<CreateMenuItem>
| Prop | Type | Default |
|---|---|---|
iconLeading icon. Decorative. | ReactNode | — |
Every prop of Radix UI’s DropdownMenu.Item, plus className.
Built directly on the Radix DropdownMenu primitive (not portalled, so the panel can grow over the pill): the trigger exposes aria-haspopup="menu" and aria-expanded, the panel is a role="menu" named by the trigger, and items are role="menuitem". Opening from the keyboard moves focus to the first item; Up/Down move, Home/End jump, typeahead searches, Enter/Space select, Escape and an outside press close and return focus to the trigger. The morphing surface and the highlight pill are aria-hidden; the pill follows data-highlighted, so pointer and keyboard never disagree. The grow, stagger and pill slide are decoration and settle instantly under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes