Header

Each row appears only when its props are provided, top to bottom: the nav row (logo on the left, nav links beside it — hidden below md — and actions on the right), the context row (title and subtitle), the search row (searchContent — an input, filters, or a ScrollNav), and the mobile menu panel (mobileMenu), an accordion that the hamburger button toggles on small screens.

import { AppShell, Header, Content } from "appshell-react";
import { Bell } from "lucide-react";

export default function App() {
  return (
    <AppShell safeArea>
      <Header
        behavior="fixed"
        logo={<span className="font-bold">Atlas</span>}
        actions={
          <button aria-label="Notifications">
            <Bell className="size-5" />
          </button>
        }
      />
      <Content className="p-4">{/* itinerary */}</Content>
    </AppShell>
  );
}

The behavior prop picks one of ten scroll strategies. In every reveal-* behavior the slim nav row stays sticky at the top while the heavier context and search rows scroll away with the page; the moment you scroll up, the behavior’s named rows glide back as a fixed overlay (and onVisibilityChange fires as the overlay shows and hides).

import { AppShell, Header, Content, ScrollNav, ScrollNavItem } from "appshell-react";

export default function App() {
  return (
    <AppShell safeArea>
      <Header
        behavior="reveal-all"
        logo={<span className="font-bold">Pulse</span>}
        title="Your feed"
        subtitle="34 new posts since this morning"
        searchContent={
          <ScrollNav>
            <ScrollNavItem label="All" active />
            <ScrollNavItem label="Following" />
            <ScrollNavItem label="Trending" />
          </ScrollNav>
        }
        mobileMenu={
          <nav className="flex flex-col gap-1">
            <a className="rounded-md px-3 py-2 hover:bg-accent" href="/feed">
              Feed
            </a>
            <a className="rounded-md px-3 py-2 hover:bg-accent" href="/messages">
              Messages
            </a>
          </nav>
        }
      />
      <Content className="p-4">{/* posts */}</Content>
    </AppShell>
  );
}

theme styles all rows at once: "light" (your background/foreground tokens, the default), "primary" (your primary tokens), "dark" (a fixed near-black zinc palette), and "none" (zero styles — bring your own). Custom row content can adapt via useHeaderTheme(); see Theming. speed sets the duration preset for the reveal overlay and mobile menu animations: "slow" (0.6s), "normal" (0.3s), "fast" (0.15s).

Desktop nav links hide below the md breakpoint, and mobileMenu is the small-screen counterpart: providing it renders a hamburger button next to the logo (below md only), which toggles an animated accordion panel under the header rows containing whatever you pass — typically a vertical link list. Without mobileMenu, no hamburger renders.

Header measures itself with a ResizeObserver and writes --header-height (in pixels) to the root element, keeping it in sync as rows appear or wrap. Anything that should dock below the header — sticky tab strips, in-page anchors, a docked Sidebar — can use top: var(--header-height). See the sticky sub-navigation example. Never author the variable statically in CSS — the Header overwrites it on mount.