Context Menu

A menu of actions triggered by a right click, with support for checkboxes, radio groups, and nested submenus. Built on Base UI's context menu primitive.

Last updated January 1, 1980

CreditsModifiedPublished

Copied from shadcn/ui.

  • ContextMenuTrigger measures the ambient direction where it renders and passes it explicitly to the portaled content, so the logical side="inline-end" default (and submenus) open toward the correct edge in RTL instead of shadcn's hardcoded side="right"
  • All spacing (item padding, checkmark position, shortcut alignment) uses logical ps-/pe-/end-/ms- utilities instead of physical pl-/pr-/right-/ml-, and the submenu chevron flips with rtl:-scale-x-100

Overview

Installation

Usage

import {
 
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
 
export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuItem>Reload</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Examples

RTL

Checkboxes, a radio group, and a submenu, all opening toward the correct reading-end edge automatically.

API Reference

ContextMenu

API reference: Base UI ContextMenu .