Skip to main content

Shell

Header

A generic app header with brand, primary navigation, optional actions, and sticky behavior.

Curated demo

Snurble

Reference

A generic app header with brand, primary navigation, optional actions, and sticky behavior.

  • Header is intentionally generic: pass slots for brand, nav, or actions when a site needs richer content.
  • Use sticky only when the consuming page accounts for persistent header space.

Props

Name Type Default Description
brand string 'Snurble' Brand text.
brandHref string '/' Brand link target.
navItems HeaderNavItem[] — Primary navigation items.
sticky boolean false Stick the header to the viewport top.
class string — Additional CSS classes.

Example snippet

<Header brand="Snurble" navItems={[{ label: "Components", href: "/components", current: true }]} />