Live Demo
Resize your browser to see responsive behavior. Toggle auth state below.
Props
| Prop | Type | Description |
|---|---|---|
| brand | { name: string; logo?: string; href?: string } | Brand identity shown on the left |
| links | { label: string; href: string }[] | Navigation links displayed in the center |
| auth (signed-out) | { state: "signed-out"; href: string; label?: string } | Single CTA button for unauthenticated users |
| auth (signed-in) | { state: "signed-in"; user: { name, avatar? }; menuItems: NavMenuItem[] } | Avatar dropdown for authenticated users |
| className | string | Additional classes on the root nav element |
Usage
<NavBar
brand={{ name: "Acme Co" }}
links={[
{ label: "Dashboard", href: "/dashboard" },
{ label: "Projects", href: "/projects" },
]}
auth={{
state: "signed-out",
href: "/sign-up",
label: "Get Started", // optional
}}
/>
Responsive Behavior
| Breakpoint | Layout |
|---|---|
| Desktop (1024px+) | Brand — Links — Auth, single row |
| Tablet (640-1023px) | Brand — Auth CTA — Hamburger |
| Phone (<640px) | Brand — Hamburger. Everything in drawer. |