# Subnav Bar

> An agency navbar with a shared morphing flyout: Services, Portfolio, and Company swap icon-and-description panels inside one sliding container with direction-aware cross-fades, a sliding indicator, featured promo cells, mono keyboard hints, and a staggered mobile drawer.

- Category: Menu
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Page: https://builder.atheros.ai/components/subnav-bar
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_subnav_bar/preview-7fc4b92f0ef3.webp

## 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

## Keyboard shortcuts

- `Tab` — Move focus between triggers, links, and buttons
- `Enter / Space` — Toggle the focused subnav trigger or activate a link
- `ArrowDown` — Open the focused trigger's panel, then walk down its links
- `ArrowUp` — Walk up panel links; from the first link, return to the trigger
- `ArrowLeft / ArrowRight` — Move between top-level items; with a panel open, morph-switch to the adjacent panel
- `Home / End` — Jump to the first or last link inside an open panel
- `Escape` — Close the flyout (refocusing its trigger) and the drawer

## Common questions

**Which frameworks is Subnav Bar available in?**

Subnav Bar ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Subnav Bar menu component free?**

Subnav Bar is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Subnav Bar support dark mode?**

Yes. Subnav Bar ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Subnav Bar live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/subnav-bar

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt