@ozankurt/context-menu

Examples

Five pages, each showing one thing, each a plausible interface rather than a test harness. Right click anything that looks like a row. The screenshots in the README are taken from exactly these pages, so what you read about is what you can open here.

File manager

A file list with a header, icons, right aligned shortcut hints, a checkbox, a submenu and a destructive item, plus a pane with overflow: hidden that the menu crosses instead of being clipped by.

Entry
@ozankurt/context-menu
Shows
The whole item model, and the top layer

Variants

The three shipped variants next to two that exist only as CSS in this page. Adding them took two rules, no JavaScript and no rebuild.

Entry
<script>, the IIFE global build
Shows
data-variant at item and panel level

States

hidden against disabled, a checkbox, a radio group that reads the row it opened on, and separators collapsing once a row disappears. Two switches on the page change the answer between opens.

Entry
@ozankurt/context-menu
Shows
Predicates, item types, separator collapsing

Submenus

Two levels of nesting on a mail list, and one submenu whose items come back from a request, so the loading panel is a real state rather than a described one.

Entry
@ozankurt/context-menu
Shows
Nesting, async resolvers, the safe triangle

Theming

The same menu under three themes, each of them one block of custom properties, with the active block printed beside it straight out of the live stylesheet.

Entry
@ozankurt/context-menu
Shows
The custom property surface, and @layer
Running these

npm run examples serves this folder from source, so a change to src/ shows up on reload with no build step. The one exception is the variants page, which deliberately loads the built dist/context-menu.global.js the way a script tag consumer would, so run npm run build once before opening it.

npm run screenshots drives these same pages and writes the README's images into docs/images/.

The playground under playground/ is a different thing: it is the fixture the Playwright suite drives, full of placement traps and an event log, and it is not meant to be looked at.