All components
Navbar
Top navigation bars in neutral, solid, and glass variants with brand and link slots.
Variants
Sizes
md
Install
zsh — navbar
1bunx stylexblocks add navbarUsage — Base UI
navbar.tsx
123456789101112131415161718192021import { Navbar } from "#components/ui/base-ui/navbar.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — the solid variant restyles the links automatically <Navbar.Root variant="neutral" size="md"> <Navbar.Content> {/* composition: render swaps the anchor for your router's link */} <Navbar.Brand href="/">Acme</Navbar.Brand> <Navbar.ItemGroup> <Navbar.Link href="/dashboard">Dashboard</Navbar.Link> <Navbar.Link href="/members">Members</Navbar.Link> </Navbar.ItemGroup> </Navbar.Content> </Navbar.Root> );}
// bar height comes from --navbar-height (3.5rem by default) — override it// with a StyleX style on Root