AdminNav
ImplementedHorizontal admin navigation of pill links that marks the active item with aria-current, plus an aria-live empty state.
components/organisms/AdminNav/AdminNav.tsxHorizontal admin navigation of pill links marking the active item with aria-current="page", plus an aria-live empty state.
AdminNav
Organism — Admin family
A row of pill-shaped links where the active item (matched by activeId) carries aria-current='page' and a teal-tinted active style. Items are always real anchors — onItemClick is a supplementary hook, not a router. An empty items array renders a minimal em-dash nav (aria-live).
Click a pill — the active item carries aria-current="page" alongside the teal tint.
Active section: Aperçu
This component supports light and dark mode.
Usage
Match activeId to the item id (not the href — active state is never derived from the URL), keep labels short enough for one row, and name the nav by its purpose.
import { AdminNav } from '@epasslive/design-system'
const sections = [
{ id: 'overview', label: 'Aperçu', href: '/admin/overview' },
{ id: 'events', label: 'Événements', href: '/admin/events' },
{ id: 'payouts', label: 'Versements', href: '/admin/payouts' },
]
<AdminNav items={sections} activeId={active} ariaLabel="Sections d'administration" />Conventions
Every item renders an <a href> — navigation works without JS, and onItemClick is a supplementary hook (analytics, close-a-drawer), not a router. items={[]} renders the designed em-dash placeholder while sections load. For more than ~6 items, use a sidebar or tab pattern instead.
Accessibility
The nav is a named <nav> landmark; the active item carries aria-current="page" (WCAG 2.4.8 / 1.3.1) so screen readers announce the current section without relying on the visual teal tint alone. The empty state renders in an aria-live="polite" span.
Props
items*AdminNavItem[]Nav entries — one pill link per item (see the item table below).
activeIdstringMarks the item whose id matches as current (aria-current='page').
onItemClick(id: string) => voidClick hook — fires for every item alongside the href navigation.
ariaLabelstring"Admin navigation"Accessible name for the nav landmark.
classNamestringClass on the nav element.
idstringStable id for the nav.
Item definition
id*stringItem identifier — matches activeId, used as React key.
label*stringVisible link text.
href*stringLink target — items are always real anchors.
Props
itemsAdminNavItem[]—Nav entries (id, label, href) — one pill link per item; an empty array renders the em-dash empty state.
activeIdstring—Marks the item whose id matches as current (aria-current="page" + teal active pill).
onItemClick(id: string) => void—Click hook fired for every item click, in addition to the href navigation.
ariaLabelstring'Admin navigation'Accessible name for the <nav> landmark.
classNamestring—Extra classes appended to the <nav> shell (both populated and empty states).
idstring—Stable id forwarded to the <nav> element.
<AdminNav />