layout

Header

Flexible site header with sticky positioning, backdrop blur, and responsive mobile hamburger menu.

Import

import { Header, HeaderBrand, HeaderNav, HeaderActions } from '@stella-ds/react'

HeaderHeaderBrandHeaderNavHeaderActions

Props

Prop	Type	Default	Description
sticky	boolean	false	Sticks to viewport top
blur	boolean	true	Applies backdrop blur when sticky
mobileNav	ReactNode	undefined	Mobile hamburger menu content

Examples

Sticky

<Header sticky>
  <HeaderBrand>Stella UI</HeaderBrand>
  <HeaderNav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </HeaderNav>
  <HeaderActions>
    <Button size="sm">Get Started</Button>
  </HeaderActions>
</Header>

← Footer

All Components

Heading →