BRAND Starbucks 2026 · Recipe: nav-drawer

HEADER brand: Starbucks; design_date: 2026-09; kind: component; used_in: global header below 768px (all pages); evidence: measured from ee527ecf1201ebec.css, patternLibStyles.b9fc59b961422a074705.css, patternLib.e9d8bfb4952c515548cb.js and computed styles on https://www.starbucks.com and /rewards at 390x844 2026-09-28 unless marked LOOK Below 768px the header is a white bar with the round logo on the left and a 44px hamburger button on the right. Tapping it slides a white panel in from the right, covering 80% of the screen width below the header, while the page behind dims with a black mask at 38% opacity. The hamburger lines morph into an X. The panel holds three large nav links, a 2px grey rule, the Sign in / Join now pills and a Find a café link with a pin icon. STRUCTURE - header bar stays on top (the drawer starts under it): height 64px (<375), 72px (375-767); logo 32px (<375) / 40px; menu button 44x44 at the right edge, icon 24px rgba(0,0,0,0.58) - mask: fixed, from the header bottom to the viewport bottom, full width, #000000 at opacity 0.38 - panel (#primary-hamburger-nav-panel): fixed; top = header height; left 20vw; width 80vw; height calc(100% - header height); bg #ffffff; overflow auto; inner top shadow inset 0 4px 3px -3px rgba(0,0,0,0.1), inset 0 4px 2px -2px rgba(0,0,0,0.07); padding-top 32px - nav items: Menu, Rewards, Gift Cards: block links 19px (text-md) rgba(0,0,0,0.87), padding 16px 32px, full width, left aligned - rule: hr with padding 16px 32px 32px, 2px line rgba(0,0,0,0.1) - actions: inline-block, padding 0 24px: Sign in (outline black pill) 12px gap Join now (filled black pill), 14px; below them Find a café 14px 600 with a 32px pin icon, margin-top 16px - secondary panel (Account push view, signed-in only): same panel; first row is a back button "Account" with a left arrow at 24px/16px, bg #f9f9f9, centered text, inset top shadow 0 4px 5px -3px rgba(0,0,0,0.2); items below; a 2px rgba(0,0,0,0.1) rule inset 32px before Sign out KEY PARAMETERS panel width 80vw (312px at 390), left 20vw (78px), top 72px at 390 item: 19px / line-height 1.5 / 400, padding 16px 32px, focus-visible outline offset -4px rule: 2px rgba(0,0,0,0.1) mask opacity 0.38 (--modalMaskOpacity), color #000000 hamburger icon: three lines in a 24px icon; open state: top line translateY(330%) rotate(-45deg), middle opacity 0, bottom line translateY(-330%) rotate(-135deg); transform-box fill-box, origin center header shadow while open: 0 2px 3px rgba(0,0,0,0.2) (sb-globalNav--hamburgerNavOpen) MOTION trigger: click on the menu button (toggle) open: - panel: animation slideOpen translateX(100%) -> translateX(0), 400ms (var(--duration) resolves to 0.4s), cubic-bezier(0.75,0,0.5,1), fill forwards - mask: opacity 0 -> 0.38, 300ms cubic-bezier(0.25,0.1,0.25,1) - icon: 400ms cubic-bezier(0.25,0.1,0.25,1) keyframes: 0% lines at rest; 33% outer lines moved to the center (translateY ±330%), no rotation; 34% middle line hidden; 66% top rotated 90deg (bottom 0); 100% top -45deg, bottom -135deg (an X) close: - panel: slideClosed translateX(0) -> translateX(100%), 400ms same curve; then hidden - mask: opacity to 0 in 200ms (exit duration) - icon: the same keyframes played in reverse, 400ms children: no stagger; links move with the panel switch (push view to Account): the secondary panel replaces the primary one with the same slide (inf); back button returns focus to it keyboard: button toggles; focus moves into the panel; Escape closes (inf) touch and mobile: tap on the mask closes (inf) reduced motion: no special rule found (inf: keep the animation, or switch to an instant show) STATES menu button hover (pointer devices): a circle behind the icon scales from 0.4 to 1 and fills with currentColor at 10% opacity (sb-iconButton hover), 200ms ease-out; active scale(0.95); focus-visible outline 2px #00754a offset 2px plus 5px white box-shadow nav item focus-visible: outline 2px #00754a inset (offset -4px) HOW TO BUILD Fixed white panel under the header, 80vw wide, anchored right; CSS keyframe slide from translateX(100%) in 400ms with cubic-bezier(0.75,0,0.5,1); a separate fixed black mask fading to 0.38. The hamburger is an SVG with three lines animated by keyframes (move together, then rotate into an X). No blur, no radius, no shadow on the panel edge except the inner top shadow under the header. PITFALLS The panel starts under the header, not at the top of the screen; the header stays visible and gets a stronger shadow. The easing is slow-in fast-out (0.75,0,0.5,1), not a standard ease-out. Links are large (19px) and regular weight, not caps; caps with letter-spacing are only for the desktop nav. Do not add a close button inside the panel: the hamburger itself turns into the X. SCREENSHOTS - file: starbucks_2026_overview_m390_menu-open.jpg shows: drawer open at 390x844 @2x on https://www.starbucks.com 2026-09-28: X icon, 312px panel from x 78, Menu / Rewards / Gift Cards 19px, 2px rule, Sign in / Join now pills, Find a café with pin; page dimmed at 0.38 do not copy: logo; use a round placeholder - file: starbucks_2026_home_m390_top.jpg shows: closed state: 72px header with 40px logo and hamburger