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 Vue, Ark UI does not decide the page layout.
Installation
Anatomy
Usage
<ContextMenu>
<ContextMenuTrigger class="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
<span class="pointer-fine:inline-block hidden">Right click here</span>
<span class="pointer-coarse:inline-block hidden">Long press here</span>
</ContextMenuTrigger>
<ContextMenuContent class="w-56">
<ContextMenuGroup>
<ContextMenuCheckboxItem
:checked="showBookmarks"
@checked-change="setShowBookmarks"
value="bookmarks-bar"
>
Show Bookmarks Bar
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem
:checked="showFullUrls"
@checked-change="setShowFullUrls"
value="full-urls"
>
Show Full URLs
</ContextMenuCheckboxItem>
</ContextMenuGroup>
<ContextMenuSeparator />
<ContextMenuGroup>
<ContextMenuCheckboxItem
:checked="showSidebar"
@checked-change="setShowSidebar"
value="sidebar"
>
Show Sidebar
</ContextMenuCheckboxItem>
<!-- The rest of the file is under Installation. -->FAQ
How are the checked states kept?
Each ContextMenuCheckboxItem is controlled: checked comes from state and onCheckedChange updates it, and each has a value.
Does the menu stay open after a toggle?
It closes; set closeOnSelect to false on the item to keep it open.
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 checked="showBookmarks", checked-change="setShowBookmarks", value="bookmarks-bar", checked="showFullUrls", checked-change="setShowFullUrls" and value="full-urls". The rest is on the Context Menu page.
