Skip to content

Context menu

Preview Available in release assets

Expose contextual actions through an ordinary native details/summary disclosure and semantic links/forms. Pointer context-menu positioning, command dispatch, Escape dismissal, and focus restoration are future enhancements, not shipped.

Server contract

Use .thin-context-menu. The marker only styles the authored native control; no pointer, command, Escape, or focus-restoration entrypoint is shipped.

The authored details/summary disclosure, links, and forms preserve the complete action path without custom JavaScript.

Context menu primary example

Show code
<section class="thin-context-menu" aria-labelledby="document-heading">
  <h2 id="document-heading">Document actions</h2>
  <article>
    <h3><a href="/documents/roadmap">Roadmap</a></h3>
    <p>Updated today.</p>
    <details data-context-menu>
      <summary>Actions for Roadmap</summary>
      <nav aria-label="Actions for Roadmap">
        <ul>
          <li><a href="/documents/roadmap/open">Open</a></li>
          <li><a href="/documents/roadmap/rename">Rename</a></li>
          <li>
            <form action="/documents/roadmap/archive" method="post">
              <button>Archive</button>
            </form>
          </li>
        </ul>
      </nav>
    </details>
  </article>
  <p>Pointer context-menu positioning, command dispatch, Escape dismissal, and focus restoration are not shipped. This authored disclosure remains the keyboard, touch, and no-JavaScript path.</p>
</section>

Anatomy

  • Named target
  • Native details/summary trigger
  • Labelled action navigation
  • Durable links
  • Server-submittable action forms

Variants and sizes

  • Compact
  • Rich preview
  • Action list

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed (native details)
  • Open by authored summary (native details)
  • Keyboard and touch activation (native details)
  • Pointer context menu (future enhancement; not shipped)
  • Viewport edge (logical CSS)
  • RTL (logical CSS)
  • No JavaScript (authored fallback)

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The authored details/summary disclosure is canonical; its links and forms perform the actions. This item ships no contextmenu listener, command dispatcher, Escape handler, or focus-restoration logic. Pointer context-menu positioning remains a future enhancement and must reuse the authored fallback.

Accessibility

Use an explicit labelled trigger, logical DOM order, durable links/forms, visible focus, touch-sized controls, and content that remains reachable at zoom and viewport edges. Do not put essential information behind hover alone.

Contract
DISCLOSURE
Basis
Native <details>, navigation links, and form controls; no menu/menuitem claim in the current fixture
Evidence
  • tests/unit/library/hover-context.test.ts

API

Use .thin-context-menu. The marker only styles the authored native control; no pointer, command, Escape, or focus-restoration entrypoint is shipped.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The authored details/summary disclosure, links, and forms preserve the complete action path without custom JavaScript.

Assets and dependencies

  • /foundation.css
  • /components.css

Dependencies: None

Source: packages/ui/src/items/hover-context/style.ts