---
title: "BRAND Stripe 2026 · Recipe: nav-mega-menu"
url: https://memocore.ai/memos/6ab4cfb6af51aac421da8806
project: "Brand Styles"
tags: "brand-stripe"
updated_at: "2026-09-25T07:19:54.415Z"
---

# BRAND Stripe 2026 · Recipe: nav-mega-menu

HEADER
brand: Stripe; design_date: 2026-09; kind: component; used_in: global header on hds pages (Page: home S1, Page: product-marketing S1)
evidence: measured from stylesheets and HTML (2026-09-23 and 2026-09-25) unless marked

LOOK
A quiet transparent header over the page. When the pointer enters it, a white rounded card with a soft blue shadow fades in behind the header. Opening a menu turns that card into one continuous white panel reaching down over the page, which blurs and whitens behind it. Moving between menus, the panel resizes and the content slides sideways and crossfades. Menu items are colored product names with a grey line of description under each.

STRUCTURE
Header bar: 76px tall, max 1349px wide, padding 16px 24px, items 28px apart: logo, menu triggers (Products, Solutions, Developers, Resources), Pricing link, then Sign in and Contact sales on the right.
Background card: absolute layer behind the bar, inset 6px top and bottom and page margin + 2px on the sides, radius 6px, white, shadow 0 30px 60px -50px #0000001a, 0 30px 60px -10px #32325d40.
Popup panel: under the bar, same width as the content frame (1262px at 1440), white, 1px #e5edf5 top border, bottom corners 6px, shadow 0 18px 36px -18px rgba(0,0,0,0.1), 0 30px 45px -30px rgba(50,50,93,0.25).
Page overlay: covers everything below the header while open; page scroll is locked.
Products panel (940+): 4 columns (Payments, Revenue, Money Management, Platforms and marketplaces), 24px column gap, padding 32px (24px below 640); a "More" column on the right on #f8fafd with a promo card; a bottom row with "See all products" above a 1px #e5edf5 line.
Solutions, Developers, Resources: columns of sections with 32px padding and 48px bottom padding.

KEY PARAMETERS
trigger: 14px/400 #061b31 with a small chevron (4px gap); when a menu is open the other triggers turn #64748d; the chevron's two strokes rotate so it points up
group title: 14px/400 #061b31, 12px above a 1px gradient underline running from the group color to pink to brand: Payments #ff6118 -> #fb76fa -> #533afd; Revenue #ffcc55 -> #fb76fa -> #533afd; Money Management #f44bcc -> #ec8fff -> #533afd; Platforms #ea2261 -> #da56ed -> #533afd
item: product name 14px/400 #533afd; description under it 14px/300 #50617a; about 12px between items (est); hover: a small arrow slides in next to the name (from -3px, fading in)
promo card (More column): white bordered card, 6px radius, image on top, title 14px/400, 3-line text, "Watch now ›" link
header buttons: height 40px, 14px, radius 4px; Contact sales primary with padding 0 20px; Sign in at rest transparent with 1px white border and the label cut out of the surface (the wave shows through the letters); on header hover or open: white bg, #533afd text; color transitions 240ms cubic-bezier(0.45,0.05,0.55,0.95), delayed 0.1s on hover
mobile (below 940): 40px menu toggle (bg #e8e9ff, #533afd icon); white full-screen sheet from 10px above the header bottom; items 18px with 16px vertical padding and 1px dashed #e5edf5 dividers, #533afd chevrons for submenus; bordered callout "See all products"; footer bar 80px with Start now and Contact sales

MOTION
header hover: background card opacity 0 -> 1 over 240ms cubic-bezier(0.45,0.05,0.55,0.95), after 0.1s
open: panel height and clip-path 200ms, opacity and transform 300ms, easing cubic-bezier(0.45,0.05,0.55,0.95); card bottom corners become square where the panel attaches
switch between menus: panel height animates to the new content; old content slides 20% toward the side it is leaving and fades out; new content comes in from 20% on the other side; opacity 250ms and transform 500ms, cubic-bezier(0.4,0,0.2,1)
close: reverse; overlay fades out 300ms
mobile: sheet fades in 300ms; submenus slide from 20% (open) or to 80% (close) with opacity; hamburger icon morph 250ms

STATES
hover: see motion; items show the arrow
focus and keyboard: focus ring 3px #5452fbbf; Escape closes; triggers are buttons with aria-expanded
touch: tap opens
reduced motion: all navigation durations 0s

HOW TO BUILD
A header with an absolutely positioned background card that fades in on hover; a single popup container under the header whose height transitions to the measured height of the active content; each menu's content stacked in one grid cell and animated with opacity and translateX depending on the direction of travel; a fixed overlay below the header with scroll lock.

PITFALLS
no product icons next to items; no colored or blurred header bar at rest; no full-width band; the panel aligns to the 1264px content frame; buttons are 4px rectangles; the menu must morph, not close and reopen.

SCREENSHOTS
- file: stripe_2026_nav-mega-menu_d1440_open.jpg
  shows: Products menu open at 1440x900 (/en-jp 2026-09-25, English copy): white panel 1262x644, 4 groups with gradient underlines, More column on #f8fafd with a Sessions card, page behind whitened
Mobile sheet: stripe_2026_overview_m390_menu-open.jpg on the Overview.