App header

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orazaka, Yomizaka, Akinaza.

Installation

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

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

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

Exemples

Props

Accessibilité

• 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.

Clavier

Bonnes pratiques

• 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.

Composants liés

• Rail navThe compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with AppHeader, which carries the product's name (and, on a phone, its mark).
• App shellThe shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title, a search that opens the command palette and its actions, the content — and the keyboard shortcuts a console lives by (⌘B, ⌘K, g then a letter).
• Nav barThe Krizaka navigation bar, the same on every site of the family: a floating pill that tightens as the page scrolls, the family switcher on the brand, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.
• CommandA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
• Language switchThe one language control of the family: a globe and the current code (FR) that opens a short list of the languages, each named in its own language (Français · English), as links with hreflang to the same page.
• Account menuThe menu under a signed-in person's avatar: who they are, their profile and settings, the language as a compact submenu, Sign out.
• BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.
• Page headerThe top of a page: a breadcrumb, the title, a description and the page's actions.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub