Dropdown Menu

A sketchy-bordered menu panel with hand-drawn item separators, built on Radix Dropdown Menu. Includes items, checkbox items, radio items, labels, and separators.

Roughness1.5Lock seedAnimate

<DropdownMenu roughness={1.5}>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Tools</DropdownMenuLabel>
    <DropdownMenuItem>Pen</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Brush</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

CLI install

npx doodleui-react add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  Button,
} from "doodleui-react";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Tools</DropdownMenuLabel>
    <DropdownMenuItem>Pen</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Brush</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

DropdownMenuCheckboxItem and DropdownMenuRadioGroup / DropdownMenuRadioItem are also exported for multi-select and single-select item groups.

Props

Prop	Type	Default	Notes
open / onOpenChange	boolean / (open: boolean) => void	uncontrolled	Radix controlled API.
animate	boolean	true	Draw-in the panel border when the menu opens. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.