Fixed Header

The header stays pinned to the top of the viewport while content scrolls beneath it.

behavior="fixed"headerfixednavigation

Open fullscreen

9:41

In this demo

Atlas — travel planner

What to try

Scroll down — the header never moves
Content slides under the pinned bar

Code

app.tsx

import { AppShell, Header, Content, MotionProvider } from "appshell-react";
import { framerMotionAdapter } from "appshell-react/motion-framer";
import { Plane } from "lucide-react";

export default function App() {
  return (
    <MotionProvider adapter={framerMotionAdapter}>
      <AppShell safeArea>
        <Header
          behavior="fixed"
          logo={
            <span className="flex items-center gap-2 font-bold">
              <Plane className="size-5 text-sky-600" />
              Atlas
            </span>
          }
          actions={<button aria-label="Account">{/* avatar */}</button>}
          title="Tokyo in five days"
          subtitle="Apr 14 – 19 · 2 travelers"
        />
        <Content>
          {/* The header stays pinned; the itinerary scrolls beneath it. */}
        </Content>
      </AppShell>
    </MotionProvider>
  );
}

Static Header