Menu

Navbar

Top app bar. 4 themes.

Shapla Tea

Installation

$ npx uix-ui@latest add navbar

This copies the file into components/ui/navbar.tsx in your project. npx shadcn@latest add @uix/navbar works too.

Usage

navbar.tsx
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

Props

PropTypeDefaultDescription
themelight | dark | brand | transparent"light"
brandReact.ReactNode–Logo and name at the start.
linksNavbarLink[]–Links in the middle; the current one gets aria-current.
searchReact.ReactNode–Search field between the links and the actions.
actionsReact.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-authority
  • clsx
  • tailwind-merge
  • lib/utils.ts
esc

↑↓ to navigate · ↵ to select · esc to close