Subnav Bar

Features

• Semantic <header> with a <nav aria-label="Primary"> primary navigation bar
• One shared flyout container: moving between Services, Portfolio, and Company keeps the panel open and morphs its position, width, and height while the content cross-fades — the Stripe-style panel morph
• Direction-aware panel transitions: content slides in from the side you are moving toward, with a soft blur cross-fade
• Panel size morphs animate grid-template-columns/grid-template-rows and transform only — no layout-triggering width/height transitions
• Rich data-driven panels: every link carries a Tabler icon tile, title, and one-line description; Services uses a two-column split layout
• Featured promo cells: Services shows an aside case-study card, Portfolio a full-width showreel strip, each with an arrow CTA that nudges on hover
• A sliding underline indicator tracks hover, focus, and the open trigger via translateX/scaleX, resting on the aria-current="page" link
• Mono kbd hint strip inside the flyout documenting arrow-key, and Escape support
• Full arrow-key support: ArrowDown/ArrowUp walk panel links, Home/End jump, ArrowLeft/ArrowRight move across top-level items and morph-switch open panels
• Panels open on hover, click, or ArrowDown, and close on Escape, outside click, or focus leaving the nav
• Filled primary CTA with a springy press (scale 0.97 on a spring cubic-bezier), plus an outlined secondary button
• Mobile burger toggles a drawer with a staggered top-down reveal and icon-labeled sublinks
• Icons are real 24x24 Tabler glyphs drawn with currentColor from a JS icon registry
• Resilient boot: nav data loads through the shared async contract, missing DOM anchors or failed data degrade gracefully, and crossing the 768px breakpoint closes the drawer or flyout and re-measures the indicator
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

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

Subnav triggers

<button aria-expanded aria-haspopup aria-controls> toggled by JS on all three items

Keyboard navigation

ArrowDown/ArrowUp/Home/End inside panels, ArrowLeft/ArrowRight across top-level items and open panels

Escape behavior

Closes the open flyout and returns focus to its trigger

Focus management

Flyout closes automatically when focus leaves the nav

Current page

aria-current="page" on the Home link; the indicator rests on it

Burger control

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

Decorative icons

Icon spans and the hint strip 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 Subnav Bar 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.