Masthead
Site header. Logo, links, call to action and a mobile menu that behaves.
- Component
- Site header
- Pattern
- APG Disclosure navigation
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Masthead · React + TailwindFull width
| Keys | What happens |
|---|---|
| Tab | First stop is the skip link, then the logo, the links, and the call to action. |
| EnterorSpace | On the menu button: open or close the small-screen menu. |
| Escape | Close the menu and put focus back on the menu button. |
| Enter | Follow the focused link. Choosing a link also closes the menu. |
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/header.json"Run it in your project root. It writes components/header.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).