Context Menu

Powered by

Base UIShadcn UILucide

Installation

When to use

Use this decision tree to determine when to use the Context Menu component:

Usage

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

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

Submenu

Checkbox items

Radio group

Grouped actions

Props

Keyboard interactions

Accessibility

• The trigger region is marked role="group" and advertises the context menu via aria-haspopup="menu" — screen-reader users can reach the menu without a pointing device by pressing Shift+F10 while focused inside.
• Menu items adopt role="menuitem" / menuitemcheckbox / menuitemradio, with roving focus inside the popup.
• Use a visible outline / ring on the trigger region so keyboard users know where to press Shift+F10.
• Keep context-menu-only actions non-essential — mirror every action elsewhere (toolbar, main menu) so pointer-restricted users are not blocked.

Credits

• We use Base UI for the context-menu component.
• We take our inspiration from Shadcn UI for the context-menu style.