Navbar

Glassy, sticky, and mobile-friendly navbar component

Brand area, action button, and hamburger menu together; a flexible Navbar that works both fixed and inside cards. It automatically uses accent colors and highlights active links based on the route.

Minimal

In-card navbar

Subdued background + small actions

Landing

Transparent + accent

Landing example with a wide call-to-action

Quick notes

The links prop supports label, href, icon, badge, active fields. If you skip active, the link matching the current route is highlighted automatically.
cta and actions are fully flexible; pass a Button,ThemeSwitcher, or any custom icon.
sticky is on by default (top-4). Set it to false when using inside cards. The subdued prop gives a softer background.

Usage Examples

Basic Navbar

import { Navbar } from "@/components/navbar";

<Navbar
  brand={{
    title: "My App",
    subtitle: "Dashboard"
  }}
  links={[
    { label: "Home", href: "/" },
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" }
  ]}
/>

Navbar with Icons and Badges

import { LayoutDashboard, Settings, Bell } from "lucide-react";
import { Navbar } from "@/components/navbar";
import { Button } from "@/components/button";

<Navbar
  brand={{
    title: "App Name",
    subtitle: "Dashboard"
  }}
  links={[
    {
      label: "Dashboard",
      href: "/dashboard",
      icon: <LayoutDashboard className="h-4 w-4" />
    },
    {
      label: "Settings",
      href: "/settings",
      icon: <Settings className="h-4 w-4" />,
      badge: "New"
    },
    {
      label: "Notifications",
      href: "/notifications",
      icon: <Bell className="h-4 w-4" />,
      badge: "3"
    }
  ]}
/>

Minimal (Subdued) Navbar

<Navbar
  brand={{
    title: "Studio",
    subtitle: "Team Panel"
  }}
  links={[
    { label: "Dashboard", href: "/dashboard" },
    { label: "Projects", href: "/projects", badge: "6" }
  ]}
  sticky={false}
  subdued
/>

Navbar with Actions and CTA

import { ThemeSwitcher } from "@/components/theme-switcher";
import { Button } from "@/components/button";

<Navbar
  brand={{
    title: "My App",
    subtitle: "Dashboard"
  }}
  links={[
    { label: "Dashboard", href: "/dashboard" },
    { label: "Projects", href: "/projects" }
  ]}
  actions={<ThemeSwitcher compact />}
  cta={
    <Button size="sm" className="shadow-sm">
      Get Started
    </Button>
  }
/>