AppHeader

Docs draft

Component story Figma ↗React component ↗DSDS entity ↗

When to use it

useThe site bar: logo, primary nav links, search/watchlist/account cluster. Premium members get no upsell; free users get the crown chip (Try free / Go per trial eligibility); logged-out keeps the crown chip and the placeholder account trigger — there is no separate Log in button in the reference.

useMinimal: centered logo only, for auth and checkout flows.

Variants

session · premium-member / free-try / free-go / logged-out / minimal / loading — Mirrors the old assembled set's real combinations. Loading skeletons the icon cluster and hides the nav; the account trigger stays.

Anatomy

.HeaderLink — rest text.secondary → hover text.primary → active/open accent.text (the old raw-orange active died with the fill-not-text ruling). Caret boolean renders the dropdown chevron (Categories, News); Open state pairs with the attached panel. aria-current on the active link, aria-expanded on caret links.

nav divider — 1px border.subtle rule between the primary group (New/Popular/Simulcast/Categories) and the secondary group (Manga/Games/Store/News) — from the old header's Bar.

.HeaderPremium — Crown upsell chip: crown accent.base + offer line accent.text over 'Premium' text.primary. Offer = Try free (trial-eligible) / Go.

.HeaderUser — Avatar trigger: Avatar 32 (or placeholder person circle when logged out) + caret. Badge boolean shows the unread dot ringed in bg.primary so it reads over any avatar.

.HeaderIcon — 40px icon button with currentColor state layers; NotificationBadge overlays the corner.

.HeaderLogo — INTERIM home for the logo lockup until the Brand page owns logos.

menus — The mega menu (onigiri.mega-menu) and user menu (onigiri.user-menu) attach under the caret links and .HeaderUser; they are Menu/MenuItem compositions, not header variants.

Design specifications

height	60px on color.bg.primary, border.subtle bottom
link	type.body, space.8 padding
premium-chip	crown 24 color.accent.base; offer type.caption color.accent.text; Premium type.label color.text.primary
skeleton	40px circles in color.bg.secondary — the card Loading pattern's tokens

Accessibility

header landmark + nav with a label; the logo link is named 'Crunchyroll home'; menus open from labeled buttons.