Context Menu — Vanilla

Right-click menu with vanilla HTML. Position and close via JS.

Context Menu

Trigger needs data-context-menu-trigger; content uses context-menu__content. Use context-menu__item for items and context-menu__separator for dividers. Wire contextmenu event to show at cursor and click to close.

Add this component

The command below includes <strong>ContextMenu</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Structure (right-click via JS)

Use Astro or Svelte component for full behavior.

HTML

html html 
<!-- Context menu: trigger with data-context-menu-trigger; content positioned on contextmenu via JS -->
<div class="context-menu" data-context-menu id="my-ctx">
  <div data-context-menu-trigger>Right click here</div>
  <div class="context-menu__content" role="menu" aria-hidden="true" hidden data-context-menu-content>
    <button type="button" class="context-menu__item">Profile</button>
    <button type="button" class="context-menu__item">Billing</button>
    <div class="context-menu__separator"></div>
    <button type="button" class="context-menu__item">Logout</button>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React