← Components/layout

Header

Top app header with brand, navigation, optional admin link, and a user menu (avatar dropdown with edit-profile / account-settings / theme toggle / view-mode / sign-out actions). Mobile-collapsing nav built in. Hides itself on listed routes (e.g. login pages, public landing pages where the chrome is undesirable).

layoutstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { Header, HeaderNavItem, HeaderUser, HeaderUserMenuConfig } from "@avala/design";

<Header>
  <HeaderNavItem />
  <HeaderUser />
  <HeaderUserMenuConfig />
</Header>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

layout-header--defaultOpen in Storybook →