Context Menu

Actions for the thing under the pointer. Opens on right-click or long-press. Never the only way to reach an action.

Default

Right-click here

Right-click or long-press the surface.


        
          1
          
          <ContextMenu>
        

          2
          
            <ContextMenuTrigger>
        

          3
          
              <div class="…">Right-click here</div>
        

          4
          
            </ContextMenuTrigger>
        

          5
          
            <ContextMenuContent>
        

          6
          
              <ContextMenuItem value="copy" @click="run('Copy URL')">
        

          7
          
                Copy URL
        

          8
          
              </ContextMenuItem>
        

          9
          
            </ContextMenuContent>
        

          10
          
          </ContextMenu>

Disabled items

disabled keeps the row visible and skips activation. Explain the lock elsewhere — a Tooltip on the row, or helper text in a Menu.

Right-click here


        
          1
          
          <ContextMenuItem disabled value="rename">
        

          2
          
            Rename…
        

          3
          
          </ContextMenuItem>

Link items

href renders the row as an anchor. Use it when the action changes the URL.

Right-click here


        
          1
          
          <ContextMenuItem href="/" value="docs">
        

          2
          
            Open Docs
        

          3
          
          </ContextMenuItem>

Prefix and suffix

Prefix

Suffix


        
          1
          
          <ContextMenuItem value="copy" @click="run('Copy URL')">
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon="Copy01Icon" :size="14" />
        

          4
          
            </template>
        

          5
          
            Copy URL
        

          6
          
          </ContextMenuItem>

Best practices

Context Menu is a shortcut on a row, file, or canvas object. Mirror every item on a visible Menu or row button so keyboard and mouse-only users keep parity.
A dropdown from a visible trigger is Menu. A global jump list is a command palette, not this component.
Labels are Title Case Verb + Noun — Copy URL, Delete Deployment. A trailing ellipsis means a follow-up dialog.
Put destructive items last. Do not ship a bare Delete. One level of items; nested submenus make keyboard travel unpredictable.
Bind right-click on desktop and long-press on touch, only on the trigger, not the whole page. Close on activate, Escape, or outside click — not on hover-out.
value is for your handler. href switches the row to a link. Prefix and suffix accept a slot or a component prop.