NavLink

Implemented

Primary-navigation anchor with a built-in active-state underline indicator. Bundles label + indicator (atom convention). Presentational: the consumer decides `active` (e.g. from the current route) so the atom stays framework-agnostic.

Categoryatoms

Sourcecomponents/atoms/NavLink/NavLink.tsx

AI HintPrimary-navigation link bundling label + active-state underline; the consumer sets active (aria-current=page + teal text) so the atom stays framework-agnostic. Applies the 44px hit area below md (DS-CORR-08-10).

Navigation link atom with active state + horizontal padding for desktop header nav. D-HOME-P2d 2026-08-11 (added px-3 for menu breathing room).

NavLink

Storefront atom (Family 7 — Tier 1)

Native <a> element with active state highlighting. Used in the storefront header navigation (home, events, etc.). WCAG 2.5.5 tap-target compliant (44x44px min).

Active Inactive

Usage

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

<NavLink href="/events" active={pathname.startsWith('/events')}>
  Events
</NavLink>

D-HOME-P2d changelog (2026-08-11)

Added px-3 horizontal padding (12px) — was 0px, caused menu items to touch on desktop
Combined with py-2 vertical padding for 44x44px tap target (WCAG 2.5.5)

Accessibility

Semantic <a> element. Active state announced viaaria-current="page" (set by parent). 44x44px min tap target via the --ep-tap-min token (min-h-[var(--ep-tap-min)]).

Props

Prop

Type

Default

Description

href*

string

—

Link destination.

children*

React.ReactNode

—

Visible link text.

active

boolean

false

When true, applies the active visual style (e.g. teal underline).

className

string

—

Additional CSS classes merged onto the <a>.

Props

Preview

NavLink

Prop

Type

Required

Default

Description

href

string

Required

—

Destination URL

children

React.ReactNode

Required

—

Link label content

active

boolean

Optional

false

Marks the link as the current page (accent color + underline)

className

string

Optional

''

Extra utility classes appended to the anchor

Quick use:<NavLink />

Accessibility

ARIA rolelink

Usage

Import

tsxSnippet

import { NavLink } from "@epasslive/design-system"

Example 1

tsxSnippet

<NavLink href="/" active>Home</NavLink>

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms