ContextMenu

Default

Usage

import { ContextMenu, ContextMenuTrigger, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuRadioGroup, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut } from '@tryvienna/ui'

<ContextMenu>
  <ContextMenuTrigger>
    <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem>
      Back <ContextMenuShortcut>Cmd+[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Forward <ContextMenuShortcut>Cmd+]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Reload <ContextMenuShortcut>Cmd+R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Save As... <ContextMenuShortcut>Cmd+S</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>Print...</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

Default

Default

<ContextMenu>
  <ContextMenuTrigger>
    <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem>
      Back <ContextMenuShortcut>Cmd+[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Forward <ContextMenuShortcut>Cmd+]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Reload <ContextMenuShortcut>Cmd+R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Save As... <ContextMenuShortcut>Cmd+S</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>Print...</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With Checkbox And Radio

With Checkbox And Radio

<ContextMenu>
  <ContextMenuTrigger>
    <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
      Show Bookmarks Bar
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem checked={showUrls} onCheckedChange={setShowUrls}>
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel inset>People</ContextMenuLabel>
    <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

With Submenu

With Submenu

<ContextMenu>
  <ContextMenuTrigger>
    <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem inset>
      Back <ContextMenuShortcut>Cmd+[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset>
      Forward <ContextMenuShortcut>Cmd+]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent className="w-48">
        <ContextMenuItem>Save Page As...</ContextMenuItem>
        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
        <ContextMenuItem>Name Window...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Developer Tools</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem inset>
      Inspect <ContextMenuShortcut>Cmd+Shift+I</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API Reference

ContextMenu

Also accepts all props from ContextMenuPrimitive.Root.

ContextMenuTrigger

Also accepts all props from ContextMenuPrimitive.Trigger.

ContextMenuGroup

Also accepts all props from ContextMenuPrimitive.Group.

ContextMenuPortal

Also accepts all props from ContextMenuPrimitive.Portal.

ContextMenuSub

Also accepts all props from ContextMenuPrimitive.Sub.

ContextMenuRadioGroup

Also accepts all props from ContextMenuPrimitive.RadioGroup.

ContextMenuSubTrigger

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from ContextMenuPrimitive.SubTrigger.

ContextMenuSubContent

Also accepts all props from ContextMenuPrimitive.SubContent.

ContextMenuContent

Also accepts all props from ContextMenuPrimitive.Content.

ContextMenuItem

Prop	Type	Default	Description
inset	boolean | undefined	-
variant	"default" | "destructive"	default

Also accepts all props from ContextMenuPrimitive.Item.

ContextMenuCheckboxItem

Prop	Type	Default	Description
checked	CheckedState | undefined	-

Also accepts all props from ContextMenuPrimitive.CheckboxItem.

ContextMenuRadioItem

Also accepts all props from ContextMenuPrimitive.RadioItem.

ContextMenuLabel

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from ContextMenuPrimitive.Label.

ContextMenuSeparator

Also accepts all props from ContextMenuPrimitive.Separator.

ContextMenuShortcut

Also accepts all props from span.

Data Attributes

Component	data-slot
ContextMenu	"context-menu"
ContextMenuTrigger	"context-menu-trigger"
ContextMenuGroup	"context-menu-group"
ContextMenuPortal	"context-menu-portal"
ContextMenuSub	"context-menu-sub"
ContextMenuRadioGroup	"context-menu-radio-group"
ContextMenuSubTrigger	"context-menu-sub-trigger"
ContextMenuSubContent	"context-menu-sub-content"
ContextMenuContent	"context-menu-content"
ContextMenuItem	"context-menu-item"
ContextMenuCheckboxItem	"context-menu-checkbox-item"
ContextMenuRadioItem	"context-menu-radio-item"
ContextMenuLabel	"context-menu-label"
ContextMenuSeparator	"context-menu-separator"
ContextMenuShortcut	"context-menu-shortcut"