Overlay Nav

Features

• The logo glyph follows the proven text-on-surface pair. Desktop navigation links retain a minimum 24px interaction height, while --buttons-radius, capped at half the control height, gives the CTA and the burger/close pair an exact capsule on pill systems and the system's own corner everywhere else.
• Semantic <header> with a <nav aria-label="Primary"> primary navigation bar
• Full-screen overlay menu (role="dialog" + aria-modal) opened by a burger with aria-expanded, aria-controls and aria-haspopup="dialog"
• Bar links and overlay links share mono 01-04 index numerals; overlay links reveal with a staggered transform/opacity transition
• Real focus trap while the overlay is open — Tab and Shift+Tab cycle only the visible links and buttons, focus returns to the burger on close
• The header bar is made inert while the overlay is open, so background controls are unreachable
• Escape closes the overlay and body scroll is locked while it is open
• Resizing past the desktop breakpoint with the overlay open auto-closes it and releases the scroll lock
• Outline CTA repeated inside the overlay footer next to a contact link
• Icons are real 24x24 Tabler glyphs drawn with currentColor
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Primary"> wraps the nav list, <nav aria-label="Overlay"> inside the dialog

Overlay dialog

role="dialog" + aria-modal="true" + aria-label on the overlay

Burger control

<button aria-expanded aria-controls aria-haspopup="dialog"> with a swapped aria-label

Focus trap

Tab and Shift+Tab wrap across the visible overlay controls; focus moves to the close button on open and returns to the burger on close

Inert background

The header row is inert while the dialog is open, so nothing behind the overlay is reachable

Escape support

Escape closes the overlay from anywhere in the document

Breakpoint safety

Crossing to the desktop layout auto-closes the overlay and releases the scroll lock

Decorative icons

Icon spans and the overlay brand marked aria-hidden="true"

Focus indicators

:focus-visible outlines — --ring in the header, accent outlines inside the dark overlay

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Overlay Nav in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the menu 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.