Flyout Header

Nav items with children[] show a dropdown panel. Desktop: opens on hover/focus. Mobile: opens on click. Fully keyboard accessible with aria-expanded, aria-haspopupand Escape key to close.

Live demo with mock data

The header below uses hardcoded nav items with children[]. Hover over "Products" or "Services" to see the flyout panels.

Keyboard accessibility

Tab — navigate through all links and triggers
Enter — open the dropdown of a trigger
Escape — close the open dropdown
Click outside — closes all open dropdowns

Characteristics

Items without children: regular link
Items with children[]: button + dropdown panel
aria-expanded="false/true" on the trigger button
aria-haspopup="true" on the trigger button
role="menu" on the dropdown list
data-testid="header-flyout" for E2E tests