BRAND Apple 2026 · Recipe: globalnav-flyout

HEADER brand: Apple; design_date: 2026-09; kind: component; used_in: global header on all pages (Page: home S1, Page: product-family S1) evidence: measured on www.apple.com (US) 2026-09-24 and 2026-09-25: stylesheet rules, header script, Chrome DevTools at 1440x900 and 390x844, unless marked LOOK A translucent frosted bar expands downward into a large panel of the same material. The page behind dims and blurs. Link columns cascade in quickly and quietly, left to right and top to bottom, with no bounce. Moving to another menu swaps the content with a short crossfade while the panel resizes. On close everything fades out in reverse and the panel shrinks back into the bar. STRUCTURE Desktop (834px and up): fixed 44px bar across the full width; content centered, max 1024px with 22px side padding; items spread with space-between, each link with 8px side padding; a hidden chevron button after each menu link opens the flyout for keyboard users. Hovering a category opens a panel under the bar in the same material; bar and panel form one continuous surface. A full-screen curtain covers the page behind. Panel: one row of 3 columns per category (e.g. Explore iPhone, Shop iPhone, More from iPhone); each column: small grey header, then links; the first column has large links followed by 2 small links. KEY PARAMETERS panel content: max-width 1024px, centered, padding 40px 22px 84px; columns left-aligned in a flex row column spacing = padding-right: 88px after the first column, 44px after the others; widths follow content column header: 12px/1.33337/400/-0.01em, #86868b (#6e6e73 in the light theme, est), 40px below the bar first column links (large): 24px/1.16667/600/0.009em; first link 6px below the header; link padding 7px 11px with -11px side margin (text aligns with the header) and -6px bottom margin, line pitch about 38px (measured on the screenshot); small links follow with 14px extra space other column links: 12px/1.33337/600/-0.01em; first link 10px below the header; line pitch about 24px panel height: 376px for iPhone including the 44px bar (content 332px) at 1440 light theme (globalheader-light): bar and panel rgba(245,245,247,0.8) over a solid #fafafc layer, links #1d1d1f / rgba(0,0,0,0.8), curtain rgba(232,232,237,0.4) + blur(20px) dark theme (globalheader-dark): bar and panel rgba(29,29,31,0.8), links #e8e8ed / rgba(255,255,255,0.8), curtain rgba(0,0,0,0.4) + blur(20px) material: backdrop-filter saturate(1.8) blur(20px) top links: 12px/12px/400/-0.12px no shadow under the panel MOTION trigger: hover on a category link (desktop, short intent delay, not measured), click on the chevron button (keyboard), tap on touch link color: 320ms cubic-bezier(0.4,0,0.6,1) open: panel height from the bar to content height; duration = content height / 2 in ms, clamped to 240-480ms (240ms for the iPhone panel); cubic-bezier(0.4,0,0.6,1) curtain: opacity in over 320ms cubic-bezier(0.4,0,0.6,1) after 80ms items: from opacity 0 and translateY(-4px) to 1 and 0, 320ms cubic-bezier(0.4,0,0.6,1); delay = item_index x 20ms + (group_index + 1) x 80ms switch to another category while open: panel height animates from the previous to the next height over 120ms; old content fades out 120ms, new content fades in 120ms; items do not cascade again close: items fade out in reverse, each duration min(160ms + (total - index) x 20ms, 240ms), no delay panel shrinks with the same height formula curtain fades out 320ms after 80ms search: field enters from 4px above, 240ms after 200ms, cubic-bezier(0.4,0,0.6,1); exits 240ms without delay; field details in Overview COMPONENTS search field STATES focus and keyboard: 2px #0071e3 outline drawn 7px inside the link box; chevron buttons show a focus box; Escape closes touch: tap opens mobile (833px and below): bar 48px with logo, search, bag and a two-line menu icon that turns into a cross; menu is a full-screen panel in the bar material with the curtain; category links stacked left-aligned, 28px/1.14286/600/0.007em (#333336 light theme), rows about 46px apart mobile open: top-level links fade in with transition-delay 200ms + index x 20ms, duration 240ms, cubic-bezier(0.4,0,0.6,1); panel height duration = viewport height / 2 in ms, clamped to 240-480ms mobile submenu: tapping a category makes the list slide 8px toward the start and fade out (240ms); the category links slide in from 8px on the other side after 160ms (240ms); a back chevron appears at the top left after 160ms (opacity and transform 240ms) mobile close: items fade out with duration min(160ms + (total - index) x 20ms, 240ms) reduced motion: instant open and close, no cascade HOW TO BUILD Fixed header with backdrop-filter blur and saturate; panel as an absolutely positioned block of the same background under the bar, height animated from 0 to content with a duration computed from the height; curtain as a fixed full-screen layer with its own blur; items animated with transition-delay computed from their index and group; hover intent on desktop, click on touch and on the keyboard chevron. PITFALLS panel color must equal bar color; no shadow under the panel; the cascade is short (20ms per item, 80ms per column); large links only in the first column; no bounce or overshoot; the curtain is light in the light theme, not black. SCREENSHOTS - file: apple_2026_globalnav-flyout_d1440_open.jpg shows: iPhone flyout open at 1440x900, light theme, opened from the keyboard chevron (focus box visible on the chevron) source: live https://www.apple.com/ 2026-09-25 key values: panel #fafafc under frosted bar; 3 columns; large links 24px/600; small links 12px/600; column headers 12px grey; light blurred curtain Mobile menu open: apple_2026_overview_m390_menu-open.jpg on the Overview.