BRAND Mailchimp 2026 · Recipe: nav-mega-menu

HEADER brand: Mailchimp; design_date: 2026-10; kind: component; used_in: every page (Overview GLOBAL CHROME) evidence: read from critical.0bda7ba5.1.css (.iaGlobalNav, .iaNav__*, .panel__top, .panel__side, .coBrandedNav, .freeTrial--banner) and the nav chunk 4798.86b9a811ed29429f.1.js (constants animationSpeed 200, panelOpenSpeed 20, IntersectionObserver is-pinned), checked with computed styles and screenshots on https://mailchimp.com/?currency=USD at 1440 and 390, 2026-10-06 unless marked LOOK Above the header sit two thin strips: an Intuit family bar (Intuit, QuickBooks, Mailchimp wordmarks in grey) and a near-black promo strip with one white sentence and a dashed-underlined link. The header itself is a 68px row: the Intuit Mailchimp logo (Freddie head + two-line wordmark), plain 13px nav labels with chevrons, a search icon, a globe language picker, a sales phone number, an outlined "Log In" pill and a yellow "Start Free Trial" pill. Over the photo hero the header has no background of its own (it sits on the white page above the hero); it becomes solid white as soon as it is hovered, focused, opened or stuck to the top. Clicking a nav label drops a full-width white panel that wipes down from the header edge while its content slides up 100px into place; the page behind dims to 30% black. The panel has a white main area with a serif title, uppercase micro-headings and link columns, and a warm-grey column on the right with icon links. On mobile the burger opens a white panel sliding in from the right; deeper levels slide over it with a "Back" button. STRUCTURE order top to bottom: skip link (hidden until focused) -> co-branded Intuit bar (desktop >= about 1420px wide with free trial flag; mobile hidden) -> promo strip (aside .freeTrial--banner, hidden below 768px on home) -> header (.iaGlobalNav, sticky) -> overlay (fixed, z 490) -> top panels (absolute under the header) and side panels (fixed right) header row: logo link 142 x 46 (16px from the left) | holder__left nav: Industries and Solutions ⌄, Integrations ⌄, Resources ⌄, Switch to Mailchimp, Pricing | search 36px icon button | language picker (globe + EN ⌄, a details/summary) | "Sales: +1 (855) ..." text link | Log In (ctaSecondary) | Start Free Trial (ctaPrimary), 14px apart top panel: white holder full width; main column 66.66% (padding 32px 40px) + aux column (bg #f6f6f4, padding 32px 40px); panel is followed by 80px of transparent padding that carries the drop shadow main column: title row (H3 Means 24px/32px #231e15 + "See what's new" ctaArrow 13px/500 at the right), then a grid of section columns (grid-auto-flow column, gap 20px, 32px below the title): section title 11px/13.75px Graphik 500 uppercase #000000 with 8px left inset, links 16px/21.6px Graphik 400 #004e56 in 28px rows (padding 6px 8px, radius 4px, 12px apart) aux column: icon links (22px icon + 16px label #004e56), then a section "PROFESSIONAL SERVICES" with plain links Integrations panel: main column is a grid of 91 x 75px white tiles with 53px logos, radius 8px, shadow 0 4px 12px rgba(36,28,21,.12), 12px gap; hovering the grid dims all other tiles to .5 (150ms); a second column "YOUR TECH STACK" lists categories; aux "FOR DEVELOPERS" KEY PARAMETERS co-branded bar: height 29px, white, wordmarks #575757 about 12px tall; hover: each wordmark recolors to its brand color (Intuit #236cff, QuickBooks #2ca01c, Mailchimp circle #ffe01b) with color/fill 200ms ease-out promo strip: bg #231e15, text #ffffff 13px (16px class on desktop variants; measured 13px), padding 12px 16px, height 42px, centered; link underlined with a 1px dashed border-bottom that disappears on hover (instant) header: height 68px (>= 751px wide), 60px below; padding 12px 16px; z-index 500; position sticky top -1px; margin-bottom -68px so the page starts under it header background: transparent by default; #ffffff when :hover, :focus-within, [data-expanded=true], .is-pinned (stuck) or .solid-bg; transition background-color 200ms pinned detection: IntersectionObserver threshold 1 on the header (top -1px makes it report <1 when stuck) nav item (.iaNav__cta): 13px/14.3px Graphik 500 #231e15, padding 8px, radius 3px, height 30px, chevron 12 x 8px 10px after the label; hover bg rgba(35,30,21,.05) 150ms; focus-visible same bg + outline 2px #4bc4c2 offset 2px; open: chevron rotates 180deg (instant) panel shadow: filter drop-shadow(4px 8px 32px rgba(0,0,0,.16)) on the transparent wrapper overlay: rgba(0,0,0,.3), fixed full screen, opacity transition via --iaGlobalNavTransition badges in links: "New"-style 11px white on #231e15, radius 4px, padding 3px 3px 4px mobile header: 60px, logo left, a compact yellow "Start Free Trial" pill (13px, padding 6px 16px, height 32px) and a 46 x 38px burger at the right side panel: width 85% max 350px (350px at 390), height 100%, white, fixed right; top action row (Back / Close X) 60px; content padding 10px 16px 16px 24px side panel L1 links: Means 20px/26.7px 400, padding 12px 6px, rows 51px, a 8 x 12px chevron at the right for items with children; bottom block: Search, language (globe + English ⌄), "Request a demo: phone", then full-width Log In (secondary) and Start Free Trial (primary) 44px pills 16px apart, then the Intuit family wordmarks side panel L2/L3: title H3 Means 20px; group buttons 13px/400 with chevrons; links 16px #004e56 MOTION desktop open (click only, no hover-to-open): body overflow hidden, header data-expanded true; the panel is unhidden, then after 20ms (panelOpenSpeed) gets .expanded wrapper: clip-path polygon(0 0,100% 0,100% 0,0 0) -> polygon(0 0,100% 0,100% 100%,0 100%), opacity 0 -> 1, 200ms (opacity .2s; clip-path .2s default ease) content: transform translateY(100px) -> 0, 200ms (default ease) overlay and the panel's ::after shadow: opacity 0 -> 1, 200ms cubic-bezier(0,0,0,1) focus moves to the panel H3 (programmatic, shows the #4bc4c2 ring for keyboard users) switch to another trigger while open: other panels close at once, the new one opens with the same wipe close: click the trigger again, the overlay, a close button or Escape; .expanded removed (reverse wipe and fade 200ms), panel hidden after 200ms (animationSpeed); body scroll restored mobile open: burger click; side panel transform translate(100%) -> 0 and opacity 0 -> 1, 200ms cubic-bezier(0,0,0,1); overlay 30% black on the uncovered 40px; L2 and L3 panels slide in the same way on top (z 1110, 1120); Back slides the top level out keyboard: Tab order through triggers; Escape closes; focus trapped inside the open panel (focusin listener); arrow keys not used reduced motion: no clip-path or slide; panels and side sheet only fade (opacity 200ms) STATES trigger hover: grey 5% fill; trigger open: chevron flipped, header white; link hover in panels: bg rgba(35,30,21,.05) 150ms, radius 4px; focus-visible: 2px #4bc4c2 outlines; language picker: details/summary dropdown; touch: same click behavior HOW TO BUILD Sticky header with a transparent background that switches to white on hover, focus-within, open or stuck (IntersectionObserver with top -1px). Each top-level label is a button that toggles a full-width panel positioned under the header; reveal it by animating clip-path from a zero-height polygon to the full box while translating the inner content up from 100px, both 200ms, and fade in a 30% black page overlay. Two columns: 2/3 white link columns, 1/3 warm grey aux column. Mobile: right-side 350px sheet sliding in 200ms, with stacked sub-sheets. PITFALLS opening on hover (it is click only); a dropdown that slides as a whole (the wipe is a clip and the content travels separately); missing the overlay dim; blue links in the main nav (only links inside panels are teal #004e56); serif nav labels on desktop (desktop labels are Graphik 13px; serif only for panel titles and mobile L1 links); header with a permanent white bar over the hero (it is transparent until hovered or stuck) SCREENSHOTS - file: mailchimp_2026_nav-mega-menu_d1440_open.jpg shows: "Industries and Solutions" panel open at 1440, scroll 0: header white, trigger with grey fill and flipped chevron, title Means 24px + "See what's new" arrow link, INDUSTRY and SOLUTIONS columns, grey aux column with Help Center, Case Studies, Events and PROFESSIONAL SERVICES, hero dimmed by rgba(0,0,0,.3); "Chat with Sales" bubble at bottom right is a third-party chat widget source: live https://mailchimp.com/?currency=USD 2026-10-06 - file: mailchimp_2026_nav-mega-menu_d1440_integrations.jpg shows: "Integrations" panel: 4 x 3 grid of logo tiles (91 x 75, radius 8px, soft shadow), YOUR TECH STACK list, FOR DEVELOPERS aux column do not copy: partner logos; use placeholder tiles - mobile menu frames are attached to the Overview (mailchimp_2026_overview_m390_menu-open.jpg, mailchimp_2026_overview_m390_menu-l2.jpg)