Skip to main content
ShadcnUI
Navigation

Header

A native header composition for caller-owned brand, navigation, utilities, and actions.

When to use it. Use it when its native document or form semantics match the caller-owned requirement.

Native baseline The caller owns headings, landmark names, commands, forms, and navigation; sticky presentation falls back to normal flow. Exact fallback No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.

How it works

  • <.header> The caller owns headings, landmark names, commands, forms, and navigation; sticky presentation falls back to normal flow.
  • package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
  • gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :header does not ship them.
  • application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Native elements, names, relationships, focus, and keyboard behavior remain authoritative.

Header support and fallback
Feature Locked-engine evidence When missing
Native baseline Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.
Exact fallback The locked-engine matrix retains the documented native or static outcome. No script is required. Without package CSS or an optional feature, content and native controls remain available in source order.

Application ownership and API

The caller owns headings, landmark names, commands, forms, and navigation; sticky presentation falls back to normal flow.

Public API Package source

Provenance

Catalogue identity navigation.header, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt responsive header presentation into a native HEEX composition that preserves caller-owned brand, navigation, utilities, forms, headings, and actions without inventing behavior.