Navbar

A sticky top navigation bar with glass-morphism backdrop blur, responsive mobile menu, animated active link indicator, and optional platform branding.

Preview

Standard

With platform branding

Installation

npx shadcn@latest add @shadszn/navbar

Files Installed

navbar.tsx -- Navbar and NavbarBrand components with mobile menu

Key Features

Sticky positioning with backdrop blur effect
Framer Motion layoutId active indicator on links
Responsive: desktop horizontal links, mobile collapsible menu
Actions slot for theme toggle, user menu, etc.
Optional platform branding with pipe separator, name, and keyboard shortcut hint
Composable: pass any ReactNode as brand, or use the built-in NavbarBrand

Usage

Standard

import { Navbar } from "@/components/navbar"
import { ThemeToggle } from "@/components/ui/theme-toggle"

export default function Layout({ children }) {
  return (
    <div>
      <Navbar
        logo={<span className="font-bold text-lg">MyApp</span>}
        links={[
          { href: "/", label: "Home", active: true },
          { href: "/docs", label: "Docs" },
          { href: "/blog", label: "Blog" },
        ]}
        actions={<ThemeToggle />}
      />
      {children}
    </div>
  )
}

With Platform Branding

import { Navbar, NavbarBrand } from "@/components/navbar"
import { ThemeToggle } from "@/components/ui/theme-toggle"

export default function Layout({ children }) {
  return (
    <div>
      <Navbar
        logo={<span className="font-bold text-lg">SZNS</span>}
        brand={<NavbarBrand name="GEM Demo Portal" shortcutHint="⌘K" />}
        links={[
          { href: "/", label: "Home", active: true },
          { href: "/docs", label: "Docs" },
        ]}
        actions={<ThemeToggle />}
      />
      {children}
    </div>
  )
}

Navbar Props

Prop	Type	Default	Description
logo	ReactNode	---	Logo element displayed on the left.
brand	ReactNode	---	Platform branding content rendered next to the logo. Use NavbarBrand or any custom ReactNode.
links	NavLink[]	[]	Array of { href, label, active? } navigation links.
actions	ReactNode	---	Content displayed after the links (theme toggle, buttons, etc.).
className	string	---	Additional CSS classes for the nav element.

NavbarBrand Props

Prop	Type	Default	Description
name	string	---	Platform or app name displayed after the pipe separator.
shortcutHint	string	---	Keyboard shortcut hint shown as a kbd element (e.g. "⌘K"). Hidden on small screens.
className	string	---	Additional CSS classes for the brand container.