Dropdown Menu
Shadcn dropdown menu reconstructed on Proto UI.
This entry shows the current shadcn dropdown-menu implementation in Proto UI.
Grouped action composition (draft)
Section titled “Grouped action composition (draft)”Group and Label provide a live accessible naming relationship; Separator and Shortcut are real passive parts. Shortcut only displays a hint and does not register a global binding. Decorative parts do not enter the action collection or add a press owner. The demo uses a 160px menu, grouped account/resources actions and a disabled API action. The real Invite users submenu is a separately pending protocol slice, not a simulated demo box. Checkbox/radio variants and complete native/GPUI, compiler, packed, visual and independent acceptance remain open.
Destructive actions (draft)
Section titled “Destructive actions (draft)”Edit/Pencil, Share/Share, Archive/Archive, and Delete/Trash follow the pinned upstream DropdownMenuWithDestructive composition. Each glyph uses its real fixed Lucide prototype with size: 16; Delete uses variant: 'destructive'. The final Delete (disabled) row is a local validation extension, separated from the upstream actions. It keeps Base’s focusable-disabled behavior and cannot select or close the menu. Destructive interactions retain the destructive foreground with a 10% tint in light mode and a 20% tint in dark mode. Keeping that palette during press is a local feedback extension over the upstream focus recipe.
Inset actions (draft)
Section titled “Inset actions (draft)”The first group uses the upstream Copy/Cut/Paste action pattern: Copy and Cut have real 16px Lucide glyphs, while Paste uses inset: true. Actions explicitly uses inset: false. The local More actions group adds an inset Label and ordinary Rename Item to show both Label settings without substituting ordinary actions for upstream Checkbox, Radio, or Submenu parts. Item and Label inset default to false, with 0.5rem padding on both sides. Their fixed New York recipe uses physical-left padding of 2rem and right padding of 0.5rem when true, including in RTL. Toggle inset changes the More actions Label, Paste and Rename through the existing prototype props; reopen the menu to compare. At a 16px root font size, inset left/right padding is 32px/8px.
These are bounded visual recipes over Base behavior. Root, Trigger, Content, Item, Group, Label, and Separator remain real prototypes; the demos add no Web-only event logic. Group/Label naming, item selection, focus navigation, and disabled behavior still belong to Base. The existing My Account example above remains separate.
Reference and evidence limits
Section titled “Reference and evidence limits”This is an unofficial Proto UI projection. The action arrangements reference the statically inspected shadcn examples at c2a67849be260701852b0977ba15eb5f3a0ce2a4, specifically DropdownMenuWithDestructive and the bounded action portion of DropdownMenuWithInset. The inset example’s Checkbox, Radio, and Submenu sections are outside this implementation.
Recipe loading, structure checks, and source-host renderer checks do not establish rendered visual parity. Cross-runtime browser paint, light/dark contrast on the actual Dropdown surface, real input/accessibility, native/GPUI, compiler, packed consumers, and independent acceptance remain incomplete. No screenshot or token assertion from another component supplies that evidence.
Readable recipes: My Account, destructive actions, and inset actions.