Context Menu

A menu triggered by right-click, displayed at the cursor position.

Right-click here

Back⌘[

Forward⌘]

Reload⌘R

variant

default

destructive

#Installation

bunx --bun barefoot add context-menu

#Usage

Right-click here

Back⌘[

Forward⌘]

Reload⌘R

More Tools

Show Bookmarks Bar⇧⌘B

Show Toolbar

People

Pedro Duarte

Colm Tuite

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  ContextMenu,6  ContextMenuTrigger,7  ContextMenuContent,8  ContextMenuItem,9  ContextMenuSeparator,10  ContextMenuShortcut,11} from '@/components/ui/context-menu'1213function ContextMenuDemo() {14  const [open, setOpen] = createSignal(false)1516  return (17    <ContextMenu open={open()} onOpenChange={setOpen}>18      <ContextMenuTrigger>19        <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">20          Right-click here21        </div>22      </ContextMenuTrigger>23      <ContextMenuContent>24        <ContextMenuItem>25          <span>Back</span>26          <ContextMenuShortcut>⌘[</ContextMenuShortcut>27        </ContextMenuItem>28        <ContextMenuItem>29          <span>Forward</span>30          <ContextMenuShortcut>⌘]</ContextMenuShortcut>31        </ContextMenuItem>32        <ContextMenuSeparator />33        <ContextMenuItem>34          <span>Reload</span>35          <ContextMenuShortcut>⌘R</ContextMenuShortcut>36        </ContextMenuItem>37      </ContextMenuContent>38    </ContextMenu>39  )40}

#Examples

#Basic

Right-click here

Back⌘[

Forward⌘]

Reload⌘R

Save As...⇧⌘S

Print...⌘P

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  ContextMenu,6  ContextMenuTrigger,7  ContextMenuContent,8  ContextMenuItem,9  ContextMenuShortcut,10  ContextMenuSeparator,11} from '@/components/ui/context-menu'1213function BasicContextMenu() {14  const [open, setOpen] = createSignal(false)1516  return (17    <ContextMenu open={open()} onOpenChange={setOpen}>18      <ContextMenuTrigger>19        <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">20          Right-click here21        </div>22      </ContextMenuTrigger>23      <ContextMenuContent>24        <ContextMenuItem>25          <span>Back</span>26          <ContextMenuShortcut>⌘[</ContextMenuShortcut>27        </ContextMenuItem>28        <ContextMenuItem>29          <span>Forward</span>30          <ContextMenuShortcut>⌘]</ContextMenuShortcut>31        </ContextMenuItem>32        <ContextMenuItem>33          <span>Reload</span>34          <ContextMenuShortcut>⌘R</ContextMenuShortcut>35        </ContextMenuItem>36        <ContextMenuSeparator />37        <ContextMenuItem>38          <span>Save As...</span>39          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>40        </ContextMenuItem>41      </ContextMenuContent>42    </ContextMenu>43  )44}

#Checkbox Items

Right-click here

Appearance

Show Bookmarks Bar

Show Full URLs

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  ContextMenu,6  ContextMenuTrigger,7  ContextMenuContent,8  ContextMenuCheckboxItem,9  ContextMenuLabel,10  ContextMenuSeparator,11} from '@/components/ui/context-menu'1213function CheckboxContextMenu() {14  const [open, setOpen] = createSignal(false)15  const [showBookmarks, setShowBookmarks] = createSignal(true)16  const [showFullUrls, setShowFullUrls] = createSignal(false)1718  return (19    <ContextMenu open={open()} onOpenChange={setOpen}>20      <ContextMenuTrigger>21        <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">22          Right-click here23        </div>24      </ContextMenuTrigger>25      <ContextMenuContent>26        <ContextMenuLabel>Appearance</ContextMenuLabel>27        <ContextMenuSeparator />28        <ContextMenuCheckboxItem checked={showBookmarks()} onCheckedChange={setShowBookmarks}>29          <span>Show Bookmarks Bar</span>30        </ContextMenuCheckboxItem>31        <ContextMenuCheckboxItem checked={showFullUrls()} onCheckedChange={setShowFullUrls}>32          <span>Show Full URLs</span>33        </ContextMenuCheckboxItem>34      </ContextMenuContent>35    </ContextMenu>36  )37}

#API Reference

ContextMenu

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

ContextMenuTrigger

Area that listens for right-click. Uses display:contents wrapper.

ContextMenuContent

Prop	Type	Default	Description
children	Child	-	Menu items to display.

ContextMenuItem

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.

ContextMenuCheckboxItem

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.

ContextMenuRadioGroup

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

ContextMenuRadioItem

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

ContextMenuSub

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

ContextMenuSubTrigger

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

ContextMenuSubContent

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

ContextMenuLabel

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

ContextMenuShortcut

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