rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

ContextMenu

Right-click triggered contextual menu anchored to the target element.

Examples

Basic (cut/copy/paste)

Right-click the area to reveal a simple context menu.

Right-click here

With icons

Each menu item includes an icon prefix; Delete is styled as a destructive action.

Right-click for icon menu

With submenu

Hover over Share to reveal a nested submenu.

Right-click for submenu

With Shortcuts

With Checkboxes

Destructive

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { ContextMenu } from "@rokle/components";
import { ContextMenu } from "@rokle/components";

export function Example() {
  return <ContextMenu />;
}

API Reference

PropTypeDefaultDescription
itemsMenuItem[]-Menu items with label and onClick.
childrenReactNode-Element that triggers the context menu on right-click.