A Stripe-like navigation model with desktop dropdowns and mobile drawer helpers.
Root + 3 atoms / Accessible / Composable
Looping preview · mega-menu + keyboard
Navigation Menu owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.
Different structures made from the same atoms.
Header 2 uses Navigation Menu List with plain Navigation Menu Item entries, then links Navigation Menu Mobile to the same menu ID.
Header 2Header 3 adds Navigation Menu Trigger and Navigation Menu Content inside one Navigation Menu Item, with explicit mobile items authored in that content panel.
Header 3Header 5 uses the same trigger/content atoms for a wider animated panel, with Navigation Menu Mobile Item nodes inside Navigation Menu Content.
Header 5Expandable sections with keyboard nav, ARIA, and animated panels.
i-layers / Root + 4 atomsView familyTabbed panels with an optional responsive accordion fallback.
i-columns / Root + 4 atomsView familyFocus-trapped modal overlays with title, description, and close.
i-frame / Root + 5 atomsView family