Navbar
Top app bar. 4 themes.
Shapla Tea
import { Button } from "@/components/ui/button";
import { Navbar } from "@/components/ui/navbar";
export default function Example() {
return (
<div style={{ width: "100%" }}>
<Navbar
brand={<b className="text-label-large">Shapla Tea</b>}
links={[{ label: "Shop", href: "#shop", current: true }, { label: "Gifts", href: "#gifts" }, { label: "Stories", href: "#stories" }]}
actions={<><Button size="sm" variant="ghost">Sign in</Button><Button size="sm">Cart (2)</Button></>}
/>
</div>
);
}
Installation
$ npx uix-ui@latest add navbarThis copies the file into components/ui/navbar.tsx in your project. npx shadcn@latest add @uix/navbar works too.
Usage
import { Navbar } from "@/components/ui/navbar";
<div style={{ width: "100%" }}>
<Navbar
brand={<b className="text-label-large">Shapla Tea</b>}
links={[{ label: "Shop", href: "#shop", current: true }, { label: "Gifts", href: "#gifts" }, { label: "Stories", href: "#stories" }]}
actions={<><Button size="sm" variant="ghost">Sign in</Button><Button size="sm">Cart (2)</Button></>}
/>
</div>
Examples
Dark theme
Shapla Tea
NJ
import { Avatar } from "@/components/ui/avatar";
import { Navbar } from "@/components/ui/navbar";
export default function Example() {
return (
<div style={{ width: "100%" }}>
<Navbar
theme="dark"
brand={<b className="text-label-large">Shapla Tea</b>}
links={[{ label: "Shop", href: "#shop", current: true }, { label: "Gifts", href: "#gifts" }]}
actions={<Avatar size="sm" initials="NJ" />}
/>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | light | dark | brand | transparent | "light" | |
brand | React.ReactNode | – | Logo and name at the start. |
links | NavbarLink[] | – | Links in the middle; the current one gets aria-current. |
search | React.ReactNode | – | Search field between the links and the actions. |
actions | React.ReactNode | – | Buttons, a notifications IconButton with badgeDot, an Avatar… at the end. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts