Actions
Context Menu
semantic HTML포인터 위치에 문맥 작업을 표시합니다.
Live example
<section data-standard-component="context-menu" class="standard-context-menu"><button type="button" data-context-trigger>Right-click or press Shift+F10</button><div role="menu" hidden data-context-menu><button type="button" role="menuitem">Rename</button><button type="button" role="menuitem">Duplicate</button><button type="button" role="menuitem">Archive</button></div><output data-example-output aria-live="polite">Menu closed</output></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
Shift+F10과 Escape를 지원하고 닫힌 뒤 원래 트리거로 포커스를 복귀시킵니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->