Sticky Header React component
A site header that stays out of the way: it slides up while you scroll down and comes back the moment you scroll up, turns compact and frosted after the first few pixels, shows reading progress along its edge, and folds its links into a menu on narrow screens.
When to use the Sticky Header component
Use Sticky Header for marketing sites, docs and blogs where navigation should always be one scroll-up away but shouldn't cover content while people read.
Use behavior="shrink" for apps and dashboards where the header holds controls people need at all times.
Installation
Add the Sticky Header component to your project with the shadcn CLI. It lands in components/sticky-header.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/sticky-header.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<StickyHeader /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| brand | React.ReactNode | ( <span className="flex items-center gap-2 text-[15px] font-semibold tracking-[-0.01em]">… |
| links | { label: string; href: string }[] | DEFAULT_LINKS |
| cta | { label: string; href: string } | { label: "Get started", href: "#start" } |
| behavior hide: slides away while scrolling down, back on scrolling up. shrink: always visible, gets compact. | "hide" | "shrink" | "hide" |
| threshold Scroll distance (px) after which the header turns compact and solid. | number | 24 |
| showProgress A thin reading-progress bar along the bottom edge. | boolean | true |
| contained Follow the nearest scrollable ancestor instead of the window (e.g. inside a preview box). | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- brandReact.ReactNodeDefault: ( <span className="flex items-center gap-2 text-[15px] font-semibold tracking-[-0.01em]">…
- links{ label: string; href: string }[]Default: DEFAULT_LINKS
- cta{ label: string; href: string }Default: { label: "Get started", href: "#start" }
- behavior
hide: slides away while scrolling down, back on scrolling up. shrink: always visible, gets compact.
"hide" | "shrink"Default: "hide" - threshold
Scroll distance (px) after which the header turns compact and solid.
numberDefault: 24 - showProgress
A thin reading-progress bar along the bottom edge.
booleanDefault: true - contained
Follow the nearest scrollable ancestor instead of the window (e.g. inside a preview box).
booleanDefault: false - theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- When does it hide?
- With behavior="hide" it slides away once you scroll down past the first 120px, and comes back as soon as you scroll up even a little. It never hides while the mobile menu is open.
- Does it work inside a scrolling panel?
- Yes. Set contained and it listens to the nearest scrollable ancestor instead of the window, which is how the preview works.
- What happens on phones?
- When the header itself is narrower than 640px, the links and button fold into a menu that opens below the bar.
