BlocksTop Nav

Blocks

Top Nav

Site header extracted from the Clean Cosmetics homepage — logo, utility icons, and primary nav with the pill-shaped 'Build My Regimen' CTA. Below the md breakpoint, the primary nav collapses behind a hamburger toggle. Pair it with AnnouncementBar on storefront pages.

Composed ofButton

Configurator

Clean Cosmetics

Usage

<TopNav cartCount={2} />

Props

PropTypeDefaultDescription
cartCountnumber0Item count shown as a badge on the cart icon; hidden when 0.

Do's and Don'ts

Do

  • ·Keep TopNav directly under AnnouncementBar on storefront pages, above the fold, exactly once per page.
  • ·Pass a live cartCount so the badge reflects real state rather than a hardcoded number.

Don't

  • ·Don't nest the announcement bar inside TopNav — compose AnnouncementBar above it on the page.
  • ·Don't nest TopNav inside a constrained-width container; it's built to span the full page width.