Design System/Atoms/Context Menu

Context Menu

Contextual menu revealed on right-click, offering actions relevant to the target element.

When To Use

  • Use Context Menu when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Key exports

ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem

Example Code

import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent,
  ContextMenuItem, ContextMenuSeparator,
} from "@hilum/ui"

<ContextMenu>
  <ContextMenuTrigger className="flex items-center justify-center rounded-xl border border-dashed border-ground-200 bg-ground-50 p-8">
    <span className="body text-ground-400">Right-click anywhere in this area</span>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>New Tab</ContextMenuItem>
    <ContextMenuItem>New Window</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive>Delete</ContextMenuItem>
  </ContextMenuContent>
// ...trimmed for docs

Variants

Basic

Plain text items with separators and a destructive action

Right-click anywhere in this area

With Icons

Leading icons to reinforce each action's meaning

Right-click to see icons

With Submenu

Nested share options accessible via a sub-trigger

Right-click to see submenu