Fabricator UI
Search documentation
Search pages, components, blocks, styles and colours.
Displays a menu of actions triggered by a right click.
Right click hereLong press here
Installation
Usage
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"<ContextMenu>
<ContextMenuTrigger>Right click here</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>Composition
Use the following composition to build a ContextMenu:
ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuItem
│ └── ContextMenuItem
├── ContextMenuSeparator
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuCheckboxItem
│ └── ContextMenuCheckboxItem
├── ContextMenuSeparator
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ └── ContextMenuRadioGroup
│ ├── ContextMenuRadioItem
│ └── ContextMenuRadioItem
└── ContextMenuSub
├── ContextMenuSubTrigger
└── ContextMenuSubContent
└── ContextMenuGroup
├── ContextMenuItem
└── ContextMenuItemBasic
A simple context menu with a few actions.
Right click hereLong press here
Submenu
Use ContextMenuSub to nest secondary actions.
Right click hereLong press here
Shortcuts
Add ContextMenuShortcut to show keyboard hints.
Right click hereLong press here
Groups
Group related actions and separate them with dividers.
Right click hereLong press here
Icons
Combine icons with labels for quick scanning.
Right click hereLong press here
Checkboxes
Use ContextMenuCheckboxItem for toggles.
Right click hereLong press here
Radio
Use ContextMenuRadioItem for exclusive choices.
Right click hereLong press here
Destructive
Use variant="destructive" to style the menu item as destructive.
Right click hereLong press here
API Reference
See the Radix UI documentation for more information.