Open experiment
Radial action menu
A spatial action menu for dense creative interfaces. One native trigger blooms four named buttons around the hub, exposes expanded state, supports predictable Tab navigation, and collapses on Escape with focus restoration.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-radial-menu" data-open="false">
<button
class="cmp-radial-menu__hub"
type="button"
aria-expanded="false"
aria-controls="cmp-radial-menu-actions"
>
<span aria-hidden="true">+</span><b>Actions</b>
</button>
<div id="cmp-radial-menu-actions" class="cmp-radial-menu__actions">
<button type="button" aria-label="Add note">
<span aria-hidden="true">✎</span><b>Note</b>
</button>
<button type="button" aria-label="Upload asset">
<span aria-hidden="true">⇧</span><b>Upload</b>
</button>
<button type="button" aria-label="Create link">
<span aria-hidden="true">↗</span><b>Link</b>
</button>
<button type="button" aria-label="Invite person">
<span aria-hidden="true">+</span><b>Invite</b>
</button>
</div>
<span class="cmp-radial-menu__status" aria-live="polite">Action menu closed</span>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- All actions are native buttons with explicit labels.
- The hub exposes expanded state and controls relationship.
- Escape collapses the menu and restores trigger focus.
License: MIT License for open-source use, modification, and distribution.