Navbar
Arrange brand navigation and primary page actions.
Preview
Import
import { Navbar, NavbarLogo, NavbarLinks, NavbarActions } from "@sigil-ui/components";Usage
<Navbar>
<NavbarLogo>Sigil</NavbarLogo>
<NavbarLinks>
<a href="#">Docs</a>
<a href="#">Components</a>
</NavbarLinks>
<NavbarActions>
<Button size="sm">Get Started</Button>
</NavbarActions>
</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 |