Appearance
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a right-click.
Examples
Default
Right click here
vue
<ContextMenu>
<ContextMenuTrigger class="flex h-37.5 w-75 items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</ContextMenuTrigger>
<ContextMenuContent class="w-64">
<ContextMenuItem inset>
Back
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset disabled>
Forward
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset>
Reload
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuCheckboxItem checked>
Show Bookmarks Bar
<ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
<ContextMenuSeparator />
<ContextMenuRadioGroup value="pedro">
<ContextMenuLabel inset>People</ContextMenuLabel>
<ContextMenuSeparator />
<ContextMenuRadioItem value="pedro">
Pedro Duarte
</ContextMenuRadioItem>
<ContextMenuRadioItem value="colm">
Colm Tuite
</ContextMenuRadioItem>
</ContextMenuRadioGroup>
</ContextMenuContent>
</ContextMenu>Props
ContextMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| dir | ltr | rtl | - | The reading direction of the menu. |
| modal | boolean | true | The modality of the menu. |
Slots
ContextMenu
| Slot | Description |
|---|---|
| default | The content of the context menu. |
ContextMenuContent
| Slot | Description |
|---|---|
| default | The items of the context menu. |
ContextMenuItem
| Slot | Description |
|---|---|
| default | The content of the menu item. |
