saturation/uiSite Header
Sticky/transparent header shell with logo, nav, and actions slots. Includes scroll detection.
ACME
Features
- Scroll detection — Built-in scroll threshold hook
- Transparent mode — Starts transparent on hero routes
- Slot-based — Logo, nav, and actions as children
- data-transparent attribute — Child components can style via group-data
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Logo element (left slot) |
| nav | ReactNode | - | Navigation element (center slot) |
| actions | ReactNode | - | Right-side actions |
| pathname | string | - | Current pathname |
| transparentOnRoutes | string[] | - | Routes where header starts transparent |
| scrollThreshold | number | 50 | Scroll distance before header becomes opaque |