App header

The family's top bar beside a RailNav: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.

Web · ✓Mobile · ✓Desktop · ✓BetaNavigation

import { AppHeader, AppHeaderCount } from "@krizaka/ui/app-header";

Orazaka

Local · Sovereign

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Orazaka, Yomizaka, Akinaza.

When to use

Beside a RailNav, as the bar of every signed-in screen of a Krizaka app (Orazaka, Yomizaka, Akinaza): the same bar in every product.
With search (AppHeaderSearch) when the app has a palette (CommandDialog): ⌘K opens it from anywhere.
With messages and notifications (AppHeaderCount) when the app has an inbox: the unread count is drawn and said.

When not to use

The bar of a site, with its menus and its call to action.Use instead: Nav bar
A screen's title and its actions inside an AppShell.Use instead: App shell
A page's title block.Use instead: Page header
A native screen's title that folds as the list scrolls.Use instead: Header

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { AppHeader, AppHeaderCount } from "@krizaka/ui/app-header";

Examples

Name, chip and actions

Orazaka's bar: the name, a « Local · Sovereign » chip, and the account on the right; the mark joins the name below md.

Orazaka

Local · Sovereign

The family's bar

Yomizaka's bar: search with ⌘K and its palette, the language, messages and notifications with their counts, the account with its name.

Yomizaka

Props

AppHeader

The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account.

Prop	Type	Default	Description
`name`required	`string`	—	The product's name, as text (`Orazaka`): the only brand element on a desktop.
`account`	`ReactNode`	—	The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in.
`actions`	`ReactNode`	—	The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before.
`chips`	`ReactNode`	—	Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version.
`homeLink`	`ReactElement<{ className?: string; children?: ReactNode; }, string \| JSXElementConstructor<any>>`	—	Your router's link element for the home link; it receives the name and the mark as children.
`href`	`string`	—	Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`.
`language`	`ReactNode`	—	The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled.
`mark`	`ReactNode`	—	The product's mark (`<ProductLogo id="orazaka" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar.
`messages`	`ReactNode`	—	Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden.
`notifications`	`ReactNode`	—	Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden.
`primary`	`ReactNode`	—	The one primary action of the app (« New check », #588), before the account.
`search`	`ReactNode`	—	The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K.

AppHeaderCount

An icon button or link of the top bar with an unread count, the count announced in its name.

Prop	Type	Default	Description
`icon`required	`ReactNode`	—	The icon (`<NotificationIcon />` of @krizaka /icons): decorative, the name is `label`.
`label`required	`string`	—	What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count.
`count`	`number`	—	The unread count; 0 or absent draws no badge.
`countLabel`	`string`	—	The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number.
`current`	`boolean`	—	The page is the one it leads to (`aria-current="page"`).
`href`	`string`	—	A link to the page (`/notifications`) instead of a button.
`linkAs`	`ElementType<any, keyof IntrinsicElements>`	—	Your router's link (Next's `Link`) for `href`; an `<a>` otherwise.
`max`	`number`	`99`	Above it the badge shows `max+`.

Accessibility

A header landmark (banner); the name is plain text (the page's h1 is the screen's, below).
A count is in the control's name: « Notifications, 3 new »; the digits on the icon are hidden from screen readers. A page it leads to is aria-current="page".
The search trigger is a button named by its words at every width (sr-only below md), with aria-haspopup="dialog" and aria-keyshortcuts.
Reduced motion: the controls' colour transitions stop; nothing else moves.
At 360 px the name truncates and the controls keep their size: nothing is clipped.

Keyboard

Keys	Action
`⌘ K / Ctrl K`	Opens the palette from anywhere on the page (`AppHeaderSearch`, `shortcut`).
`Tab`	Walks the controls in their visual order: search, language, actions, messages, notifications, primary, account.
`Enter / Space`	Opens the palette, follows a count's link or opens the host's popover.

Best practices

Pass the name as text and the mark as mark: never put a mark in the header that the rail already carries on a desktop (mark is hidden from md up for that reason).
Fill the slots, never actions with everything: the order (search · language · actions · messages · notifications · primary · account) is the family's, so every product's bar reads the same.
AppHeaderSearch comes from @krizaka/ui/app-header/search (a client entry: its ⌘K listener); the bar itself stays server-safe.
Give each count its words with their plural (countLabel="3 nouvelles"): the badge is decorative, the name says it.
The language is LanguageSwitch (the same control as NavBar.Language); the account is AccountMenu with showName (the name from sm).
Chips say a state, not a place: « Local · Sovereign », « Dev », a version.
Make the name a link home with homeLink (your router's link) or href.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub