Camaleo
EN · PTGitHub
// preview in
saved for every page

Context menu

The actions for one thing, opened with a right-click, a long press or the keyboard. It is a shortcut, so every action in it also needs a visible way in.

Built on Base UIPattern WAI-ARIA MenuClient componentSource ↗

Installation

Set up Camaleo once (Installation), then import the parts you need. The popup renders in a portal, at the pointer, and keeps the skin, mode and brand of the page around it.

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSeparator } from "@camaleo/react";

Anatomy

ContextMenu holds the open state. ContextMenuTrigger (data-slot="context-menu-trigger") is the area people right-click; ContextMenuContent renders the popup below in a portal. Every part has a data-slot you can target from CSS.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above, and they all start closed: right-click them.

minimal · light · #3fa34d
Right-click here, long-press on a touch screen, or focus it and press Shift+F10
Q3 board report.pdf1.8 MB

On a file row

The classic use: the actions for one file, where the pointer already is. tabIndex={0} lets keyboard users focus the row and open the menu with Shift+F10 or the Menu key.

Right-click an empty spot on the board

On a canvas

On an empty board there is nothing to put a button on, so the right-click is where people look. Keep the same commands in a toolbar.

Checkout flow diagramFrame · 1280 × 720

Groups and separators

A ContextMenuGroupLabel over each group helps people scan a longer menu; the destructive group goes last.

Shipping is free on orders over $50. Returns are accepted within 30 days of delivery.

With shortcuts

People who right-click are learning. Show the shortcut with Kbd and add aria-keyshortcuts, so next time they skip the menu.

Kickoff notes — Nov 3, 2026

Act, then announce

Right-click the note and pick an action. Focus goes back to the note, and a role="status" line says what happened.

Q3 board report.pdf

Also in a visible menu

A context menu is hidden by nature. Put the same actions behind a "⋯" button, from one shared list, so touch, keyboard and screen reader users find them.

Right-click an empty spot on the board
Zoom 100% · Show grid: on · Snap to grid: off

Checkbox and radio items

Right-click the board and change its settings: ContextMenuCheckboxItem and ContextMenuRadioItem keep the menu open and report aria-checked, so people can change several at once.

Office lease 2027.pdfInbox

Submenu

Put a list of destinations behind one "Move to" item instead of stretching the menu; → opens it, ← goes back, and the current folder is disabled.

In context

A context menu speeds up work that already has a visible path. These are whole pieces of UI you can copy, in the skin you picked.

  • Office lease 2027.pdf2.4 MB
  • Budget 2027.xlsx860 KB
  • Floor plan.png3.1 MB
File managerContextMenu · Menu · IconButton
In review

Redesign the checkout page

Due Nov 12, 2026 · Rafael Moreira

Kanban cardCard · Badge · ContextMenu
RM
Rafael Moreira 10:42 AM

The new checkout is on staging. Can someone test the coupon field before Friday?

Chat messageAvatar · ContextMenu · Menu

Guidelines

Budget 2027.xlsx
DoThe same actions behind a visible button.

The right-click is a shortcut for people who know it; the "⋯" button is the way in for everyone else.

Budget 2027.xlsx
Don’tActions only on right-click.

Nothing on screen says they exist, and on a phone or with a screen reader nobody finds them.

Let’s move the launch to Nov 18 so QA has a full week.
DoActions for the thing under the pointer.

Right-click a comment: reply, edit, copy. The menu answers "what can I do with this?".

Let’s move the launch to Nov 18 so QA has a full week.
Don’tApp-wide commands.

Settings and Sign out have nothing to do with the comment, and they belong in the header where people expect them.

Props

PropTypeDefaultDescription
iconReactNode—Icon before the label. Hidden from screen readers.
shortcutReactNode—Shown at the end, e.g. "Ctrl D". Display only: wire the shortcut yourself.
tone"danger"—danger colors a destructive action. Put it last, after a separator.
renderReactElement | (props, state) => ReactElement—Renders another element, such as an <a> for a link.
onClickfunction—Runs when the item is chosen with a click, Enter or Space.
disabledbooleanfalseDisables the item. It stays focusable, so people can still read it.
labelstring—Text for typeahead when the item's content is not plain text.
closeOnClickbooleantrueWhether choosing the item closes the menu.

These are the props of ContextMenuItem. ContextMenu takes Base UI's root props: open, onOpenChange, disabled and actionsRef. ContextMenuCheckboxItem takes checked, defaultChecked, onCheckedChange and shortcut; ContextMenuRadioGroup takes value, defaultValue and onValueChange, and each ContextMenuRadioItem a value. Wrap a ContextMenuSubTrigger and its ContextMenuSubContent in a ContextMenuSub. ContextMenuTrigger renders a <div>: give it tabIndex={0} so it can be focused, or render to use another element.

Styling hooks

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the popup itself.

Attributes

data-popup-openon the trigger while the menu is open
data-highlightedon the item under the keyboard or pointer
data-checked · data-uncheckedon checkbox and radio items
data-disabledon a disabled item
data-tonedanger

Tokens it reads

Color

--cml-accent-text--cml-border--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-item-highlight-fg--cml-item-highlight-shadow--cml-popover-bg--cml-popover-border--cml-shadow-popover--cml-surface-raised

Shape & size

--cml-border-width--cml-font-size-field--cml-item-height--cml-item-padding--cml-popover-border-width--cml-popover-padding--cml-radius-item--cml-radius-popover

Type & motion

--cml-font-control--cml-font-field--cml-font-label--cml-font-weight-control

This component only

--cml-context-menu-radius--cml-context-menu-width--cml-disabled-opacity--cml-item-check--cml-item-highlight--cml-menu-icons

Accessibility

Shift+F10 / MenuOn a focused trigger: opens the menu and moves focus into it.
↓ / ↑Reaches the first or last item, then moves between items, wrapping at the ends.
Home / EndJumps to the first or last item.
A–ZJumps to the next item that starts with that letter.
Enter / SpaceChooses the item; on a checkbox or radio item, toggles it and keeps the menu open.
→ / ←On a submenu trigger, → opens the submenu on its first item; inside it, ← closes it and goes back.
EscCloses the submenu, or the menu, and returns focus to the trigger.
TabCloses the whole menu, submenus included, and returns focus to where it was.
MenuThe same list of actions, opened from a visible button.KbdShows the shortcut next to each action.ButtonFor the one or two actions people use most.
Was this page helpful? · Edit this page on GitHub