Navigation — primary site nav

SECTIONSNIPPETPLANNED

sections/header.liquid

snippets/mega-menu.liquid

Spec only This component is planned but not yet built. The interactive playground will land in a future Mock U-14 release. This page documents the component's purpose, schema surface, file structure, and dependencies so adjacent work can plan against it.

§ 01What it is.

Primary site navigation. Pulls from Shopify's linklists (configured under Online Store → Navigation). Supports mega-menu pattern for top-level items with featured products + sub-links, single-column dropdowns for simpler items, mobile drawer with full keyboard support, sticky-on-scroll behaviour, optional contrast change on scroll. Search and account icons inline.

§ 02When to use it.

Site header. The 5-top-level IA (Shop · Find Your Fit · Learn · Support · About) routes through this component.

§ 03Files, type, build position.

Component type

Section — full-bleed merchant-configurable page region. Lives in sections/, shows up in the theme editor sidebar.
Snippet — reusable Liquid partial called from other Liquid files via {% render %}. Lives in snippets/, not directly merchant-editable.

Files

sections/header.liquid snippets/mega-menu.liquid

Build position

Pairs with U-15. Built late after primitives are stable.

§ 04Related components.

The components this one depends on, composes with, or pairs with. Click through to each.