Context Menu

import { Copy, Download, FolderInput, Link2, Pencil, Trash2 } from "lucide-react"

import {

When to use it#

Use a context menu as a shortcut for the actions on something the person can point at: a file, a row in a table, an item on a canvas. Right click opens it at the pointer. On a touch screen, a long press does.

Most people never right click a web page, so a context menu should never be the only way to do something. Always offer the same actions in a visible place as well, such as a "more" button with a Dropdown Menu.

Import#

Copyimport {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubTrigger,
} from "@hel/ui/context-menu"

Anatomy#

A context menu has the same parts as a Dropdown Menu, with one difference. ContextMenuTrigger is not a button. It is an area, and the menu opens when someone right clicks anywhere inside it. Give it the shape you need with className, or put your content inside it.

Copy<ContextMenu>
  <ContextMenuTrigger className="h-32 w-80">Right click this file</ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem icon={Pencil}>Rename</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Items work as they do in the dropdown menu. They take an icon, a kbd hint or a hotkey, variant="destructive" for a red item, and disabled. Use ContextMenuGroup with a ContextMenuGroupLabel for headings, ContextMenuSeparator for lines, and ContextMenuSub with a ContextMenuSubTrigger for a submenu, as the first example does.

The arrow keys move between items, Enter picks one, and Escape closes the menu.

Examples#

Next to a visible button#

This card offers its actions twice: a right click opens the context menu, and the button opens a dropdown menu. Both are built from the same list, so they cannot drift apart.

import { Download, Eye, Link2, MoreHorizontal, Pencil } from "lucide-react"

import {

Props#

ContextMenuContent#

ContextMenuItem#

The menu also takes every prop of the Base UI context menu.