Header

A scroll-aware header with 6 different behavior modes, support for logos, titles, navigation, and search content.

9:41

Usage

app.tsx

1import { AppShell, Header, Content } from "appshell-react";
2 
3export default function App() {
4  return (
5    <AppShell safeArea>
6      <Header
7        behavior="fixed"
8        logo={<span className="font-bold">MyApp</span>}
9        title="Dashboard"
10        subtitle="Welcome back"
11      />
12      <Content className="p-4">
13        {/* Your content */}
14      </Content>
15    </AppShell>
16  );
17}

Behaviors

The Header supports 6 different scroll behaviors:

fixed

Header stays fixed at the top, always visible

static

Header scrolls with content

reveal-all

Header hides on scroll down, reveals all rows on scroll up

reveal-nav

Header hides on scroll down, reveals only navigation row on scroll up

reveal-title

Header hides on scroll down, reveals only title row on scroll up

sticky

Header sticks after scrolling past a threshold

Reveal Header

Use reveal-all for headers that hide when scrolling down and reveal when scrolling up:

Fullscreen

9:41

With Navigation

Add horizontal navigation using HeaderNav and HeaderNavItem:

tsx

1import { Header, HeaderNav, HeaderNavItem } from "appshell-react";
2 
3<Header
4  behavior="fixed"
5  logo={<Logo />}
6  nav={
7    <HeaderNav>
8      <HeaderNavItem label="Home" active />
9      <HeaderNavItem label="Products" />
10      <HeaderNavItem label="About" />
11    </HeaderNav>
12  }
13/>

Props

Prop	Type	Default	Description
behavior	HeaderBehavior	"fixed"	Scroll behavior mode
theme	"light" \| "dark" \| "auto"	"auto"	Visual theme
logo	ReactNode	-	Logo/brand element (left side)
title	string	-	Main title text
subtitle	string	-	Secondary subtitle text
nav	ReactNode	-	Navigation component (HeaderNav)
actions	ReactNode	-	Action buttons (right side)
searchContent	ReactNode	-	Search bar or filter content
className	string	-	Additional CSS classes

CSS Variables

The Header exposes its height as a CSS variable for sticky positioning:

css

1/* Use for sticky elements below the header */
2.sticky-element {
3  top: var(--header-height, 3.5rem);
4}

AppShell Next: Footer