Navbar
A Navbar component from the Sigil design system.
Import
import { Navbar, NavbarLogo, NavbarLinks, NavbarActions } from "@sigil-ui/components";Preview
Usage
<Navbar>...</Navbar>Sub-components
This component includes the following parts:
<NavbarLogo><NavbarLinks><NavbarActions>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sticky | boolean | — | Make the navbar sticky at the top. |
transparent | boolean | — | Transparent background (useful for hero overlays). |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-navbar-padding-x | Navbar padding x |
--s-navbar-height | Navbar height |
--s-navbar-shadow | Navbar shadow |
--s-background | Background |
--s-navbar-backdrop-blur | Navbar backdrop blur |
--s-border | Border |
--s-border-style | Border style |
--s-navbar-logo-gap | Navbar logo gap |
--s-text | Text |
--s-navbar-logo-height | Navbar logo height |
--s-navbar-item-gap | Navbar item gap |