Context Menu

A right-click menu built for what was clicked, with shortcuts, typeahead, long-press on touch and Shift+F10.

Actionscontext menuright clickmenu

Workbench

Rendering Context Menu…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add context-menu

Usage

TSX

import { ContextMenu } from "@/components/ui/context-menu";

export default function Example() {
  return (
    <ContextMenu
      label="File actions"
      items={[
        { label: "Rename", shortcut: "F2" },
        { label: "Duplicate" },
        { label: "Delete", danger: true, separatorBefore: true },
      ]}
    >
      <div className="ml-card" data-variant="outline">
        <div className="ml-card-content">Right-click, or press Shift+F10, on this file.</div>
      </div>
    </ContextMenu>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

HTML

<div class="ml-context-menu-area">
  <div class="ml-card" data-variant="outline">
    <div class="ml-card-content">Right-click, or press Shift+F10, on this file.</div>
  </div>
</div>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-context-menu-area`	—
`ml-context-menu`	—
`ml-context-menu-item`	`aria-disabled="true"data-dangerdata-highlighted`
`ml-context-menu-icon`	—
`ml-context-menu-label`	—
`ml-context-menu-shortcut`	—
`ml-context-menu-separator`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

@mlola-ui/behavior
@mlola-ui/icons

Open the standalone preview