Components / context-menu

context-menu

Right-click menu. Uses Popover API + inline oncontextmenu.

status: partial js: consumer support: popover-api

Preview

Right-click here

Markup

<div oncontextmenu="event.preventDefault();document.getElementById('X').showPopover()">Right-click here</div><div class="context-menu" popover id="X" role="menu"><button class="dropdown-item" role="menuitem">Back</button><button class="dropdown-item" role="menuitemcheckbox" aria-checked="true" data-checked>Show bookmarks</button><div class="dropdown-separator" role="separator"></div><button class="dropdown-item" role="menuitem">Reload</button></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/context-menu.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add context-menu

Accessibility

Classes

.context-menu

Dependencies

base/tokens dropdown