TopNav

Usage

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

<TopNav
  logo={<strong>ePassLive</strong>}
  links={[
    { label: 'Events', href: '/events', active: true },
    { label: 'Venues', href: '/venues' },
  ]}
  onSearchOpen={() => openSearch()}
  cartCount={3}
  user={{ name: 'Alex Tremblay', initials: 'AT', href: '/account' }}
/>

// FR consumers: pass the locale-aware label props verbatim
<TopNav ... cartAriaLabel="Panier, 3 billets" accountLabel="Compte : Alex" />

Responsive behavior

Below the md breakpoint the nav links are hidden (hidden md:block) — there is no built-in hamburger button. Pair TopNav with MobileNav for the mobile menu (storefront Header composes exactly this pair). The search, cart, and user-chip actions remain visible at every width.

Composition patterns

• AccountShell is the only DS composer — it renders TopNav as the account-page header band and forwards the four i18n label props (cartAriaLabel, accountLabel, siteHeaderLabel, homeLabel). Don't hand-roll a second top nav inside its children.
• The storefront site header intentionally diverges — SiteHeader is built on the DS Header organism (DS-CORR-09-13), not on TopNav. The two coexist by design.
• Reference consumer: the storefront /docs header (packages/storefront/src/components/docs/TopNav.tsx) wraps TopNav with locale-aware labels from the topnav.* message namespace — copy it when embedding TopNav in a localized app.
• FR/EN labels: the English defaults are baked in; pass the label props above to get translated aria strings (cartAriaLabel / accountLabel are used verbatim).

Accessibility

The root is a <header role="banner"> with an accessible name (siteHeaderLabel, default "Site header"). The primary nav landmark is named via ariaLabel (default "Primary"), the active link carries aria-current="page", and every icon-only control (search, cart, user chip, logo) exposes an accessible name through aria-label per WCAG 4.1.2. The cart, account, header, and home labels can each be overridden verbatim for locale-aware consumers. Interactive icons are decorative (aria-hidden) and focus rings / the active-link underline use the ep-text-teal token, which meets WCAG AA non-text contrast (5.45:1) in the light theme.

Props