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-variantat 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
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.