Navbar

Top navigation bar with brand logo, nav link sections, active state, spacer for right-aligned items, and dark mode support.

Preview

Basic navbar

import { Navbar, NavbarBrand, NavbarSection, NavbarItem, NavbarSpacer } from '@/registry/ui-kit/tailwind-navbar/react'

function Example() {
  return (
    <Navbar>
      <NavbarBrand>Acme</NavbarBrand>
      <NavbarSection>
        <NavbarItem href="#" active>Dashboard</NavbarItem>
        <NavbarItem href="#">Projects</NavbarItem>
        <NavbarItem href="#">Team</NavbarItem>
      </NavbarSection>
      <NavbarSpacer />
      <NavbarSection>
        <NavbarItem href="#">Profile</NavbarItem>
      </NavbarSection>
    </Navbar>
  )
}

Component API

Prop	Default	Description
`Navbar`	`—`	Top-level nav container with bottom border.
`NavbarBrand`	`—`	Logo and brand name area. Accepts optional href to render as a link.
`NavbarSection`	`—`	Flex group for grouping nav items together.
`NavbarItem`	`—`	Individual nav link with hover and active states.
`active`	`false`	Highlights the nav item as the current page.
`NavbarSpacer`	`—`	Flexible spacer to push items to the right.

Source Code

"use client";

/* ── Navbar ── */

interface NavbarProps {
  children: React.ReactNode;
  className?: string;
}

function Navbar({ children, className = "" }: NavbarProps) {
  return (
    <nav
      className={`border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
    >
      <div className="flex items-center gap-4 px-4 py-3">{children}</div>
    </nav>
  );
}

/* ── NavbarBrand ── */

interface NavbarBrandProps {
  children: React.ReactNode;
  className?: string;
  href?: string;
}

function NavbarBrand({ children, className = "", href }: NavbarBrandProps) {
  const classes = `flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100 ${className}`;

  if (href) {
    return (
      <a href={href} className={classes}>
        {children}
      </a>
    );
  }

  return <div className={classes}>{children}</div>;
}

/* ── NavbarSection ── */

interface NavbarSectionProps {
  children: React.ReactNode;
  className?: string;
}

function NavbarSection({ children, className = "" }: NavbarSectionProps) {
  return (
    <div className={`flex items-center gap-1 ${className}`}>{children}</div>
  );
}

/* ── NavbarItem ── */

interface NavbarItemProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  active?: boolean;
  children: React.ReactNode;
  className?: string;
}

function NavbarItem({
  active = false,
  children,
  className = "",
  ...props
}: NavbarItemProps) {
  return (
    <a
      className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
        active
          ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100"
          : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
      } ${className}`}
      aria-current={active ? "page" : undefined}
      {...props}
    >
      {children}
    </a>
  );
}

/* ── NavbarSpacer ── */

function NavbarSpacer() {
  return <div className="flex-1" />;
}

export { Navbar, NavbarBrand, NavbarSection, NavbarItem, NavbarSpacer };
export default Navbar;