Helm
Dropdown menu. A button that opens a list of actions: arrow keys, type to jump, Escape to close.
- Component
- Dropdown menu
- Pattern
- APG Menu Button
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Helm · React + TailwindFull width
| Keys | What happens |
|---|---|
| EnterorSpace | Open the menu and go to its first item. |
| ↓or↑ | Open the menu at the first or last item, then move between items. |
| HomeorEnd | Jump to the first or last item. |
| A–Z | Jump to the next item that starts with what you type. |
| Esc | Close the menu and put focus back on the button. |
| Tab | Close the menu and carry on through the page. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/menu.json"Run it in your project root. It writes components/menu.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).