Cognition

Components

Context Menu

A menu opened by right-click, or long-press on touch, that surfaces actions relevant to the element under the pointer.

Preview

Right-click here

Rendered with live Cognition tokens. Right-click the area to open the real menu, no dark: classes.

Variants

Back
Reload
Save as

Default

Copy
Favorite
Share

With icons

Copy⌘C
Cut⌘X
Paste⌘V

With keyboard shortcuts

Open
Share
Rename

With sub-menu

Cut
Copy
Select all

With separator

Rename
Duplicate
Delete

With destructive item

Menus compose icons, shortcuts, sub-menus, separators, and a destructive item. The panels above are shown open for reference.

States

Right-click target

Closed. The default state.

Copy
Rename
Duplicate

Open. The menu is showing.

Copy
Rename
Duplicate

Item hover. One item is focused.

Copy
Rename
Duplicate

Item disabled. Dimmed, inert.

Open
Share
Rename
Copy link
Email

Sub-menu open.

A context menu opens on right-click, so the open, hover, and sub-menu states are shown statically. The preview opens the real menu.

API

Component
Description
ContextMenu
Root that wires the trigger to the menu.
ContextMenuTrigger
The element that opens the menu on right-click.
ContextMenuContent
The floating menu surface.
ContextMenuItem
A standard action item.
ContextMenuCheckboxItem
An item with a toggle checkmark.
ContextMenuRadioItem
A single-select item within a radio group.
ContextMenuLabel
A non-interactive section heading.
ContextMenuSeparator
A dividing line between groups.
ContextMenuShortcut
Right-aligned keyboard hint on an item.
ContextMenuGroup
Groups related items together.
ContextMenuSub
Root for a nested sub-menu.
ContextMenuSubTrigger
Item that opens the sub-menu.
ContextMenuSubContent
The nested sub-menu surface.
ContextMenuRadioGroup
Wraps radio items to share one value.

Compose the parts inside a single ContextMenu. Items take disabled and onSelect; nest a ContextMenuSub for sub-menus.

Don't and Do

Don't

Don't make a context menu the only path to a critical action. Right-click is hidden by nature, so many people never discover it, and touch users have no equivalent for some gestures. Always offer those actions somewhere visible as well.

Do
<ContextMenu>
  <ContextMenuTrigger>{children}</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Rename</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Use it to augment the primary UI with contextual shortcuts for power users.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function FileTile({ children }) {
  return (
    <ContextMenu>
      <ContextMenuTrigger>{children}</ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuItem>
          Copy <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>Rename</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}