shadcn.io is an independent project built on shadcn/ui
The dashed area reads Right click here. Show Bookmarks Bar starts checked, Show Full URLs does not, and a separator sets Show Sidebar apart. Show Sidebar starts checked.
Use checkbox items for view settings that are independent of each other. Repeat them in a Dropdown Menu so they are not only on right-click. In React, Base UI does not decide the page layout.
Installation
Anatomy
Usage
<ContextMenu>
<ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
<span className="pointer-fine:inline-block hidden">Right click here</span>
<span className="pointer-coarse:inline-block hidden">
Long press here
</span>
</ContextMenuTrigger>
<ContextMenuContent className="w-56">
<ContextMenuGroup>
<ContextMenuCheckboxItem defaultChecked>
Show Bookmarks Bar
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
</ContextMenuGroup>
<ContextMenuSeparator />
<ContextMenuGroup>
<ContextMenuCheckboxItem defaultChecked>
Show Sidebar
</ContextMenuCheckboxItem>
</ContextMenuGroup>
</ContextMenuContent>
</ContextMenu>FAQ
How are the checked states kept?
Each ContextMenuCheckboxItem is uncontrolled, with defaultChecked on Show Bookmarks Bar and Show Sidebar. Pass checked and onCheckedChange to control them.
How is the state announced?
Each item is a menu item checkbox, so screen readers say whether it is checked; the check mark is only visual.
What opens the menu?
A right-click inside the dashed area, which reads Right click here on a mouse and Long press here on a touch screen.
The area is ContextMenuTrigger; a long press on it opens the menu too.
Wrap your own row, file or canvas in the trigger instead.
How do keyboard and touch users find these actions?
The arrow keys move through an open menu, Enter runs an item and Escape closes it. A right-click is easy to miss, so also offer the same actions from a visible button, such as a Dropdown Menu.
API Reference
Context Menu
Sets defaultChecked. The rest is on the Context Menu page.
