Mega Menu Header

Features

• Semantic <header> with a <nav aria-label="Primary"> primary navigation bar
• Two data-driven two-column numbered-index mega-menus — Product (Database, Authentication, Storage, Edge Functions, Realtime, Vector) and Developers (Documentation, Guides, API Reference, Community, Changelog, GitHub) — each opened by a real <button aria-expanded>
• Each panel opens on a tick-and-hairline uppercase eyebrow, numbers its entries 01–06 across hairline-divided rows, and closes on an ink-ruled promo entry (Compare plans / Launch Week) with a nudging arrow
• Mega-menus reveal on hover-capable pointers, button activation, or ArrowDown with synchronized disclosure state
• Moving between the two triggers cross-fades the panels rather than a hard close/reopen
• Hover and press are colour-only on every control — the entry ordinal takes the accent and the title picks up a hairline underline, with no fill, scale, or lift
• Filled primary CTA plus an outlined secondary sign-in button
• Mobile burger button that toggles a focus-trapped drawer with a staggered link reveal and the CTAs
• Icons are real 24x24 Tabler glyphs drawn with currentColor
• Logo and operational icons use design-system foreground while accent remains decorative
• Desktop links, disclosure buttons, CTAs, burger, and drawer links maintain 44px targets
• Closed panels and drawer synchronize visual state with aria-hidden and inert
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Primary"> wraps the nav list

Mega-menu triggers

<button aria-expanded aria-haspopup aria-controls> toggled by JS on both Product and Developers

Panel state

Each panel synchronizes aria-hidden and inert with its trigger's expanded state

Burger control

<button aria-expanded aria-controls> with a swapped aria-label

Drawer state

Closed drawer is aria-hidden and inert; both clear before focus moves inside

Drawer focus trap

Tab cycles within the open drawer; focus moves in on open and returns to the burger on close

Responsive state

Crossing the 900px breakpoint closes whichever navigation surface is no longer visible

Disclosure keyboard

Left/Right and Home/End move between triggers; ArrowDown opens and focuses the first panel link

Decorative icons

Icon spans marked aria-hidden="true"

Focus indicators

:focus-visible with --ring outline on all controls

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Mega Menu Header in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.