BRAND Nike 2026 · Recipe: nav-mega-menu

HEADER brand: Nike; design_date: 2026-09; kind: component; used_in: every page (Overview GLOBAL CHROME; Page: home, product-listing, product-detail) evidence: measured on https://www.nike.com (United States, English) 2026-09-25 from the header emotion stylesheet (nav-css-*) and computed styles unless marked LOOK A plain white header in two tiers: a thin light-grey utility bar with sub-brand icons on the left and small account links on the right, and a 60px white bar with the swoosh on the left, seven centered category links in medium weight and a pill search field plus two icon buttons on the right. Hovering a category underlines it with a 2px black bar and drops a full-width white panel with four columns of grey links while the page below dims. Scrolling down slides the whole header up out of view; scrolling up brings the 60px bar back. No shadows, no blur, no color. STRUCTURE nav (fixed, top 0, z-index 3, white, height 96px from 960px) utility bar: 36px, bg #F5F5F5, full width; left: Jordan jumpman and Converse star-chevron icons 24px at x 48 and ~96 (est); right: Find a Store | Help | Join Us | Sign In, 12px/18px Helvetica Now Text Medium 500 #111111, separated by 1px x 12px vertical bars #111111 (est), right edge at container edge minus 48px (est 56px from viewport edge incl. scrollbar) main bar: 60px, white, 3 zones in a 12-col grid with 48px side margin left: swoosh link 59x59 (svg scaled 1.33) at x 48, black #111111 center: category links Men, Women, Kids, Jordan, NikeSKIMS, Sport, Sportswear; each item a 60px flex cell with padding-left 12px; label 16px/28px Helvetica Now Text Medium 500 #111111, 2px transparent bottom border; gap between labels ~24px (est from 12px padding each side) right: search pill 168x36 (est) bg #F5F5F5 radius 30px (24px magnifier with AI sparkle + placeholder "Search" 16px #707072); favorites heart and bag icon buttons 36x36, padding 6px, radius 30px, transparent; 4px apart (est) scrim: fixed full-screen div rgba(17,17,17,0.36), opacity 0 / visibility hidden at rest mega panel (per category): absolute, top 60px, full width, bg #FFFFFF, padding 0 48px 36px, overflow hidden, content centered (justify-content center) KEY PARAMETERS utility bar: height 36px; bg #F5F5F5; link font 12px/18px 500 (body3-strong) main bar: height 60px; bg #FFFFFF category label: 16px/28px 500; hover/open: border-bottom 2px solid #111111 (underline sits ~4px under text baseline, est) mega panel: 4 columns, each 213px wide, left edges at 275, 500, 724, 949px at 1440 (column pitch ~224px, i.e. 213px + 11px gap), block centered; panel height ~313px for Men column title: 14px/21px Helvetica Now Text Medium 500 #111111 (body2-strong), padding-top 36px (dropdown__sub_list_title), bottom 12px links: 12px/18px Helvetica Now Text Medium 500 #707072 (body3-strong), padding-bottom 8px (26px pitch); hover #111111, instant Men columns: New & Featured (6 links), Shoes (8), Clothing (8), Accessories (5) scrim: #111111 at 0.36 over the page below the header icon buttons: 36px, hover bg #E5E5E5 (icon-button tertiary hover), focus 0 0 0 2px #1151FF z-index: nav 3, panel 3 when open, scrim 1 MOTION open (hover over category, desktop): at 0: underline appears (instant); panel max-height 0 -> 800px, 250ms (default ease); scrim opacity 0 -> 1, 250ms at 200ms: panel content ([role=menu]) opacity 0 -> 1 200ms linear and translateY(-10px) -> 0 300ms (default ease) close: content opacity/translate back 100ms, no delay; panel max-height -> 0 250ms; scrim opacity -> 0 250ms, then visibility hidden (0s linear 250ms delay) switching categories while open: new panel replaces the old; contents re-run the 200ms-delayed fade (inf) scroll (peekaboo): the pre-header container is position fixed with transition transform 150ms ease. Scrolling down past the header hides it (main bar class is-hidden: translateY(-60px); utility bar topbar-hidden: translateY(-36px)); scrolling up shows the 60px main bar fixed at top 0 (is-fixed) while the utility bar stays hidden; at page top both tiers return. On the listing page the sticky title bar takes the freed top slot (Page: product-listing). user dropdown (Sign In hover when logged in): popover 214px min width, top 36px, right 0, radius 0 0 8px 8px, opacity 0 -> 1 and translateY(-20px) -> 0, 250ms STATES hover: category underline 2px #111111; panel links grey -> #111111; utility links no change (est) focus and keyboard: all links and icon buttons show box-shadow 0 0 0 2px #1151FF (or outline 2px #1151FF offset 2px on the AI search icon); a hidden "Skip to main content" link appears at top left (14px/26px 500, white bg, padding 0 10px, margin 5px 0 0 10px) on focus; Enter on a category opens its panel (inf) touch and mobile (below 960px): utility bar and center links are removed; bar is 60px: swoosh left at 24px (est), right side 4 icon buttons 36px (search with sparkle, profile, bag, hamburger). The hamburger opens a slide-out drawer: drawer: width 320px, full height, white, anchored right, translateX(320px) -> 0 with transform 250ms (podium transition-duration-normal, default ease); page behind covered by scrim rgba(17,17,17,0.36) close row: 36px round close button top right (padding 6px), wrapper padding 6px 18px 6px 24px items: Men ... Sportswear, 24px/28.8px Helvetica Now Display Medium 500 #111111, min-height 45px, padding 8px 24px 8px 36px; items with children end in a 24px chevron right submenu: a second 320px panel slides in (flex 0 0 320px, transform 250ms) with a back caret + title row (min-height 45px) and links, padding 12px 0 150px sub-brand block: Jordan and Converse rows with 24px icons, 16px 500 (est), padding 24px 0 member block: "Become a Nike Member for the best products, inspiration and stories in sport. Learn more" 20px/1.3 #707072 with the "Learn more" in #111111 (est); buttons "Join Us" (primary black pill) and "Sign In" (secondary pill with #CACACB ring), 36px tall, 8px apart focus: 2px #1151FF ring on items (visible on the close button in the screenshot) reduced motion: drawer and header transitions set to 0.01s loading fallback: header is server-rendered; panels exist in the HTML but collapsed (max-height 0) HOW TO BUILD Fixed two-tier header (36 + 60px) with a scroll listener that toggles a hidden class when the scroll direction is down and the offset exceeds the header height; transform-only transitions of 150ms. Each category item is a hover target that toggles an is-open class on its own absolutely positioned panel (max-height animation) and on a shared scrim; the inner menu fades and drops 10px after a 200ms delay so quick pointer passes do not flash content. On mobile replace with a right-hand 320px drawer that translates in over a 36% black scrim; nested levels are additional 320px panels translated horizontally. PITFALLS Do not add a shadow or border under the header; the separation is only the white bar over the page (listing and product pages add a 1px #E5E5E5 line only on promo bars). Panel links are small (12px) and grey; making them 14-16px or black at rest loses the look. The underline is a 2px border on the label itself, not a full-cell indicator. The panel must not slide as a whole: it grows via max-height and only its content moves 10px. Without the 200ms content delay the menu feels jumpy. SCREENSHOTS - file: nike_2026_nav-mega-menu_d1440_open.jpg shows: Men mega-menu open at 1440x900 on the home page, live https://www.nike.com 2026-09-25; utility bar, main bar with Men underlined, 4 link columns, page dimmed by the scrim key values: utility bar 36px #F5F5F5; main bar 60px; titles 14px 500 #111111; links 12px 500 #707072 26px pitch; columns 213px at x 275/500/724/949; scrim rgba(17,17,17,0.36) do not copy: swoosh, Jordan and Converse marks, hero photo - file: nike_2026_overview_m390_menu-open.jpg shows: mobile drawer open at 390x844, 320px panel from the right, 24px category items, sub-brand rows, member block with Join Us / Sign In; keyboard focus ring #1151FF on the close button do not copy: logos and icons; use placeholders