Adminheader

Implemented

Sticky admin top bar with brand, nav, and breadcrumbs slots plus a bilingual Cmd+K command-palette search trigger.

Categoryorganisms

Sourcecomponents/organisms/AdminHeader/AdminHeader.tsx

AI HintSlot brand/nav/breadcrumbs as ReactNode; locale ('en' or 'fr') sets the search button aria-label and onSearch opens the command palette.

Sticky admin top bar with brand, nav and breadcrumbs slots plus a bilingual Cmd+K command-palette search trigger (role="banner").

AdminHeader

Organism — Admin family

Sticky role=banner header with three ReactNode slots (brand, nav, breadcrumbs) and a Cmd+K trigger whose accessible label is locale-keyed ('Open command palette' / 'Ouvrir la palette de commandes'). onSearch opens the command palette; breadcrumbs render on a second row when present.

Command palette closed.

This component supports light and dark mode.

Usage

Brand, nav and breadcrumbs are ReactNode slots — compose AdminNav, breadcrumbs or custom nodes; the header owns only the sticky chrome and layout. locale keys the built-in search-trigger label only (slot content is localized at the call site), and onSearch opens your palette — nothing opens by default.

import { AdminHeader, AdminNav } from '@epasslive/design-system'

<AdminHeader
  locale={locale}
  brand={<span className="font-semibold text-ep-text-heading">ePassLive</span>}
  nav={<AdminNav items={sections} activeId="overview" />}
  breadcrumbs={<ProfileBreadcrumbs profile={profile} />}
  onSearch={() => openCommandPalette()}
/>

Conventions

Keep brand short (wordmark or name) and give breadcrumbs a real trail (grandparent → parent → current). The ⌘K glyph is decorative (aria-hidden) — the locale-keyed aria-label carries the meaning, and the keydown binding happens at the app level, not here.

Accessibility

The bar is a role="banner" landmark (WCAG 1.3.1). The search trigger exposes a locale-keyed aria-label (WCAG 4.1.2) — the visible ⌘K glyph is aria-hidden. Slot content keeps its own semantics; nothing interactive is flattened.

Props

Prop

Type

Default

Description

brand*

React.ReactNode

—

Brand slot — logo or wordmark rendered at the left.

nav

React.ReactNode

—

Nav slot between brand and search trigger (e.g. <AdminNav />).

breadcrumbs

React.ReactNode

—

Breadcrumb row — rendered on its own line below the main bar when present.

onSearch

() => void

—

Opens the command palette (Cmd+K trigger click).

locale*

"en" | "fr"

—

Keys the search trigger's accessible label (bilingual chrome string).

Additional interface props

Prop

Type

Default

Description

className

string

—

Class on the header element (e.g. surface tint).

id

string

—

Stable id for the banner.

Props

Preview

Adminheader

Prop

Type

Required

Default

Description

brand

React.ReactNode

Required

—

Brand slot — logo or wordmark rendered at the left.

nav

React.ReactNode

Optional

—

Optional nav slot; render a `<nav>`-landmark child (e.g. AdminNav). The slot itself is not a landmark.

breadcrumbs

React.ReactNode

Optional

—

Breadcrumb row — rendered on its own line below the main bar when present.

onSearch

() => void

Optional

—

Opens the command palette (⌘K trigger click). When omitted, the trigger does not render.

locale

"en" | "fr"

Required

—

Keys the search trigger's accessible label (bilingual chrome string).

searchLabel

string

Optional

—

Overrides the search trigger's accessible label (defaults to the locale-keyed chrome string).

className

string

Optional

—

Extra classes on the root.

id

string

Optional

—

Stable id on the root <header> banner element.

Quick use:<Adminheader />