Header
Group the introductory content of a page or section.
Preview
Import
import { Header, Button } from "@sigil-ui/components";Usage
<Header sticky={false} className="flex items-center justify-between px-[var(--s-space-16)]"><strong>Workspace</strong><Button size="sm">New project</Button></Header>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sticky | boolean | true | Keep the header at the top while scrolling. |
blur | boolean | true | Blur content behind the header. |
bordered | boolean | true | Show the bottom border. |
height | number | string | Navbar height token | Override the header height. |
children | ReactNode | — | Header content. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-navbar-backdrop-blur | Navbar backdrop blur |
--s-navbar-height | Navbar height |
--s-border | Border |
--s-background | Background |
--s-navbar-bg-opacity | Navbar bg opacity |