Dropdown Menu

A menu of actions triggered by a button.

Actions

Copy

Paste

align="end"

My Account

Settings⇧⌘,

Language

Help

Show Bookmarks Bar

Show Toolbar

Log out

1<DropdownMenu open={open()} onOpenChange={setOpen}><DropdownMenuTrigger>...</DropdownMenuTrigger><DropdownMenuContent>...</DropdownMenuContent></DropdownMenu>

#Installation

bunx --bun barefoot add dropdown-menu

#Usage

Actions

Copy

Paste

Delete

1"use client"23import { createSignal } from "@barefootjs/dom"4import {5  DropdownMenu,6  DropdownMenuTrigger,7  DropdownMenuContent,8  DropdownMenuItem,9  DropdownMenuLabel,10  DropdownMenuSeparator,11} from "@/components/ui/dropdown-menu"1213function MyMenu() {14  const [open, setOpen] = createSignal(false)1516  return (17    <DropdownMenu open={open()} onOpenChange={setOpen}>18      <DropdownMenuTrigger>19        <span className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm">20          Open Menu21        </span>22      </DropdownMenuTrigger>23      <DropdownMenuContent>24        <DropdownMenuLabel>Actions</DropdownMenuLabel>25        <DropdownMenuSeparator />26        <DropdownMenuItem>27          <span>Copy</span>28        </DropdownMenuItem>29        <DropdownMenuItem>30          <span>Paste</span>31        </DropdownMenuItem>32        <DropdownMenuSeparator />33        <DropdownMenuItem variant="destructive">34          <span>Delete</span>35        </DropdownMenuItem>36      </DropdownMenuContent>37    </DropdownMenu>38  )39}

#Examples

#Basic

Actions

Copy

Paste

Delete

1"use client"23import { createSignal } from "@barefootjs/dom"4import {5  DropdownMenu,6  DropdownMenuTrigger,7  DropdownMenuContent,8  DropdownMenuItem,9  DropdownMenuLabel,10  DropdownMenuSeparator,11} from "@/components/ui/dropdown-menu"1213function BasicMenu() {14  const [open, setOpen] = createSignal(false)1516  return (17    <DropdownMenu open={open()} onOpenChange={setOpen}>18      <DropdownMenuTrigger>19        <span className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm">20          Open Menu21        </span>22      </DropdownMenuTrigger>23      <DropdownMenuContent>24        <DropdownMenuLabel>Actions</DropdownMenuLabel>25        <DropdownMenuSeparator />26        <DropdownMenuItem>27          <span>Copy</span>28        </DropdownMenuItem>29        <DropdownMenuItem>30          <span>Paste</span>31        </DropdownMenuItem>32        <DropdownMenuSeparator />33        <DropdownMenuItem variant="destructive">34          <span>Delete</span>35        </DropdownMenuItem>36      </DropdownMenuContent>37    </DropdownMenu>38  )39}

#Checkbox Items

Toggle Panels

Status Bar

Activity Panel

1"use client"23import { createSignal } from "@barefootjs/dom"4import {5  DropdownMenu,6  DropdownMenuTrigger,7  DropdownMenuContent,8  DropdownMenuCheckboxItem,9  DropdownMenuLabel,10  DropdownMenuSeparator,11} from "@/components/ui/dropdown-menu"1213function CheckboxMenu() {14  const [open, setOpen] = createSignal(false)15  const [showStatus, setShowStatus] = createSignal(true)16  const [showActivity, setShowActivity] = createSignal(false)1718  return (19    <DropdownMenu open={open()} onOpenChange={setOpen}>20      <DropdownMenuTrigger>21        <span className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm">22          View23        </span>24      </DropdownMenuTrigger>25      <DropdownMenuContent>26        <DropdownMenuLabel>Toggle Panels</DropdownMenuLabel>27        <DropdownMenuSeparator />28        <DropdownMenuCheckboxItem checked={showStatus()} onCheckedChange={setShowStatus}>29          <span>Status Bar</span>30        </DropdownMenuCheckboxItem>31        <DropdownMenuCheckboxItem checked={showActivity()} onCheckedChange={setShowActivity}>32          <span>Activity Panel</span>33        </DropdownMenuCheckboxItem>34      </DropdownMenuContent>35    </DropdownMenu>36  )37}

#API Reference

DropdownMenu

Prop	Type	Default	Description
open	boolean	false	Whether the dropdown menu is open.
onOpenChange	(open: boolean) => void	-	Callback when open state should change.

DropdownMenuTrigger

Prop	Type	Default	Description
disabled	boolean	false	Whether the trigger is disabled.
asChild	boolean	false	Render child element as trigger instead of built-in button.

DropdownMenuContent

Prop	Type	Default	Description
align	'start' \| 'end'	'start'	Alignment relative to the trigger element.

DropdownMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Whether the item is disabled.
onSelect	() => void	-	Callback when the item is selected. Menu auto-closes after selection.
variant	'default' \| 'destructive'	'default'	Visual variant. Use "destructive" for dangerous actions like log out.

DropdownMenuCheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked.
onCheckedChange	(checked: boolean) => void	-	Callback when checked state changes. Menu stays open.
disabled	boolean	false	Whether the item is disabled.

DropdownMenuRadioGroup

Prop	Type	Default	Description
value	string	-	Currently selected value.
onValueChange	(value: string) => void	-	Callback when value changes.

DropdownMenuRadioItem

Prop	Type	Default	Description
value	string	-	Value for this radio item.
disabled	boolean	false	Whether the item is disabled.

DropdownMenuSub

Submenu container. Manages sub-open state internally. Wrap SubTrigger and SubContent.

DropdownMenuSubTrigger

Prop	Type	Default	Description
disabled	boolean	false	Whether the sub trigger is disabled.

DropdownMenuSubContent

Content container for submenu items. Positioned to the right of the trigger.

DropdownMenuLabel

Prop	Type	Default	Description
children	Child	-	The label text to display.

DropdownMenuShortcut

Prop	Type	Default	Description
children	Child	-	The keyboard shortcut text (e.g., "⇧⌘,").