Chartroom
Mega menu. Several columns of links under one heading, opened by click or hover, closed by Escape.
- Component
- Mega menu
- Pattern
- APG Disclosure navigation
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Chartroom · React + TailwindFull width
| Keys | What happens |
|---|---|
| TaborShift + Tab | Move along the bar, and through an open panel in reading order. |
| EnterorSpace | Open or close the focused menu. |
| ↓ | Open the menu and go straight to its first link. |
| Esc | Close the open panel and put focus back on its button. |
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/mega-menu.json"Run it in your project root. It writes components/mega-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).