Storefront

Site header

The coach.com header: store tabs in the charcoal bar, country and stores, the wordmark centred, search and account icons, the primary nav. On mobile the tabs share the bar with the icons and the nav scrolls.

components/coach/blocks/site-header.tsx

Preview

Live, on the prototype's content. Switch to mobile to see it at 390px.
1440pxOpen

Built from

Anatomy

  1. 01Charcoal bar, 36px: brand switcher
  2. 0280px row: locale, wordmark, search and icons
  3. 03Primary nav, 12px caps, underline on hover
  4. 04Soft shadow instead of a rule

Usage

components/coach/blocks/site-header.tsx
import { SiteHeader } from "@/components/coach/blocks/site-header";

<SiteHeader />

Props

PropTypeDefaultDescription
classNamestring—Merged last. For spacing around the block, not for restyling it.

Guidance

Do

  • Keep the nav to five or six items; the mega menu holds the rest.

Don't

  • Make it sticky with the charcoal bar attached. Only the main rows may stick.

Where it's used