Components
Menu
A dropdown/popup menu primitive with keyboard navigation. Used for user menus, action menus, and other lists of choices.
Usage
<st-menu>
<button data-menu-trigger type="button" class="...">
Open menu
</button>
<div data-menu-content role="menu" class="..." hidden>
<a href="/settings" role="menuitem" class="...">Settings</a>
<button type="button" role="menuitem" class="...">Log out</button>
</div>
</st-menu>
The component discovers the trigger and content via data-menu-trigger and data-menu-content attributes. Menu items should have role="menuitem" for keyboard navigation.
Placement
Use the placement attribute to control menu position relative to the trigger:
| Value | Position |
|---|---|
| bottom-start | Below trigger, aligned left (default) |
| bottom-end | Below trigger, aligned right |
| bottom | Below trigger, centered |
| top-start | Above trigger, aligned left |
| top-end | Above trigger, aligned right |
| top | Above trigger, centered |
<st-menu placement="top-start">
...
</st-menu>Keyboard Navigation
| Key | Action |
|---|---|
| ↓ / ↑ | Move between menu items |
| Home / End | Jump to first / last item |
| Enter / Space | Activate focused item |
| Escape | Close the menu |
| Tab | Close menu and continue tabbing |
Implementation Note
The menu uses the native Popover API where available, with a fallback for older browsers. No additional library required.