TopNav

organisms

Public site top navigation — sticky 64px, Logo + nav links + search + cart + user. Transparent → solid on scroll. Mobile: collapses to hamburger.

ARIA Role: banner

Demo

Demo for TopNav (organisms)

Public site top navigation — sticky 64px, Logo + nav links + search + cart + user. Transparent → solid on scroll. Mobile: collapses to hamburger.

Props

Prop	Type	Required	Default	Description
`logo`	`React.ReactNode`	Yes	`—`
`links`	`NavLink[]`	Yes	`—`	2-6 links
`onSearchOpen`	`() => void`	Yes	`—`
`cartCount`	`number`	Yes	`—`	0+

TypeScript Interface

interface TopNavProps {
  logo: React.ReactNode;
  links: { label: string; href: string; active?: boolean }[];
  onSearchOpen: () => void;
  cartCount: number;
  user?: { name: string; initials: string; href: string } | null;
  variant?: 'solid' | 'transparent' | 'solidOnScroll';
}

Assertions (NASA Rule 5)

[type]logo, links, onSearchOpen, cartCount all required(NASA Rule 5)
[aria]<header role='banner'>; <nav aria-label='Primary'>; active link aria-current='page'; cart has aria-label='Cart, {N} items'(WCAG 1.3.1, 4.1.2)

Usage

Import

import { Topnav } from '@epasslive/design-system'

Basic

<Topnav />

With Variants

<Topnav variant="primary" size="md" />