Shadcn Navbar

Responsive navigation bar components for web applications with various layouts and features.

"use client"

import * as React from "react"
import { Archive, FileText, Menu, User, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: FileText,
    title: "Pages",
    href: "#",
  },
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

function NavList() {
  return (
    <ul className="mt-4 flex flex-col gap-x-3 gap-y-1.5 lg:mt-0 lg:flex-row lg:items-center">
      {LINKS.map(({ icon: Icon, title, href }) => (
        <li key={title}>
          <a
            href={href}
            className="hover:text-primary flex items-center gap-x-2 p-1 text-sm transition-colors"
          >
            <Icon className="h-4 w-4" />
            {title}
          </a>
        </li>
      ))}
    </ul>
  )
}

export function NavbarDemo() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="bg-card mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
      <div className="flex items-center">
        <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <Separator
          orientation="vertical"
          className="mr-1.5 ml-1 hidden h-5 lg:block"
        />
        <div className="hidden lg:block">
          <NavList />
        </div>
        <Button size="sm" className="hidden lg:ml-auto lg:inline-flex">
          Sign In
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="ml-auto lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <NavList />
          <Button size="sm" className="mt-4 w-full">
            Sign In
          </Button>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add navbar

Usage

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"

Examples

A basic responsive navbar with collapsible mobile menu.

"use client"

import * as React from "react"
import { Menu, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"

const LINKS = [
  {
    title: "Pages",
    href: "#",
  },
  {
    title: "Account",
    href: "#",
  },
  {
    title: "Blocks",
    href: "#",
  },
  {
    title: "Docs",
    href: "#",
  },
]

function NavList() {
  return (
    <ul className="m-2 flex flex-col gap-x-3 gap-y-1 lg:m-0 lg:flex-row lg:items-center">
      {LINKS.map(({ title, href }) => (
        <li key={title}>
          <a
            href={href}
            className="hover:text-primary p-1 text-sm transition-colors"
          >
            {title}
          </a>
        </li>
      ))}
    </ul>
  )
}

export function NavbarSimple() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="bg-card mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
      <div className="flex items-center">
        <a href="#" className="mx-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <div className="hidden lg:mr-2 lg:ml-auto lg:block">
          <NavList />
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="ml-auto lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <NavList />
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

A navbar featuring icons alongside navigation items and a sign-in button.

"use client"

import * as React from "react"
import { Archive, FileText, Menu, User, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: FileText,
    title: "Pages",
    href: "#",
  },
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

function NavList() {
  return (
    <ul className="mt-4 flex flex-col gap-x-3 gap-y-1.5 lg:mt-0 lg:flex-row lg:items-center">
      {LINKS.map(({ icon: Icon, title, href }) => (
        <li key={title}>
          <a
            href={href}
            className="hover:text-primary flex items-center gap-x-2 p-1 text-sm transition-colors"
          >
            <Icon className="h-4 w-4" />
            {title}
          </a>
        </li>
      ))}
    </ul>
  )
}

export function NavbarDemo() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="bg-card mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
      <div className="flex items-center">
        <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <Separator
          orientation="vertical"
          className="mr-1.5 ml-1 hidden h-5 lg:block"
        />
        <div className="hidden lg:block">
          <NavList />
        </div>
        <Button size="sm" className="hidden lg:ml-auto lg:inline-flex">
          Sign In
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="ml-auto lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <NavList />
          <Button size="sm" className="mt-4 w-full">
            Sign In
          </Button>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

A dark-themed navbar perfect for dark mode interfaces or bold designs.

"use client"

import * as React from "react"
import { Archive, FileText, Menu, User, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: FileText,
    title: "Pages",
    href: "#",
  },
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

function NavList() {
  return (
    <ul className="mt-4 flex flex-col gap-x-3 gap-y-1.5 lg:mt-0 lg:flex-row lg:items-center">
      {LINKS.map(({ icon: Icon, title, href }) => (
        <li key={title}>
          <a
            href={href}
            className="flex items-center gap-x-2 p-1 text-sm text-white transition-colors hover:text-white/80"
          >
            <Icon className="h-4 w-4" />
            {title}
          </a>
        </li>
      ))}
    </ul>
  )
}

export function NavbarDark() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="mx-auto w-full max-w-screen-xl rounded-lg border border-neutral-800 bg-black px-4 py-2 shadow-sm">
      <div className="flex items-center text-white">
        <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <Separator
          orientation="vertical"
          className="mr-1.5 ml-1 hidden h-5 bg-white/25 lg:block"
        />
        <div className="hidden lg:block">
          <NavList />
        </div>
        <Button
          size="sm"
          variant="outline"
          className="hidden border-white bg-white text-black hover:bg-white/90 hover:text-black lg:ml-auto lg:inline-flex"
        >
          Sign In
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="ml-auto text-white hover:bg-white/10 lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <NavList />
          <Button
            size="sm"
            variant="outline"
            className="mt-4 w-full border-white bg-white text-black hover:bg-white/90 hover:text-black"
          >
            Sign In
          </Button>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

A navbar with an integrated search input field.

import NavbarWithSearch from "@/components/creative-tim/blocks/navbar-with-search"

export default function Page() {
  return <NavbarWithSearch />
}

A sticky navbar that remains visible while scrolling through content.

"use client"

import * as React from "react"
import { Archive, FileText, Image, Menu, User, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: FileText,
    title: "Pages",
    href: "#",
  },
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

function NavList() {
  return (
    <ul className="mt-4 flex flex-col gap-x-3 gap-y-1.5 lg:mt-0 lg:flex-row lg:items-center">
      {LINKS.map(({ icon: Icon, title, href }) => (
        <li key={title}>
          <a
            href={href}
            className="hover:text-primary flex items-center gap-x-2 p-1 text-sm transition-colors"
          >
            <Icon className="h-4 w-4" />
            {title}
          </a>
        </li>
      ))}
    </ul>
  )
}

export function NavbarSticky() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <div className="h-96 w-full overflow-scroll">
      <nav className="bg-card sticky top-0 z-10 mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
        <div className="flex items-center">
          <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
            Creative Tim UI
          </a>
          <Separator
            orientation="vertical"
            className="mr-1.5 ml-1 hidden h-5 lg:block"
          />
          <div className="hidden lg:block">
            <NavList />
          </div>
          <Button size="sm" className="hidden lg:ml-auto lg:inline-flex">
            Sign In
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setOpenNav(!openNav)}
            className="ml-auto lg:hidden"
          >
            {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </Button>
        </div>
        <Collapsible open={openNav}>
          <CollapsibleContent>
            <NavList />
            <Button size="sm" className="mt-4 w-full">
              Sign In
            </Button>
          </CollapsibleContent>
        </Collapsible>
      </nav>
      <main className="w-full">
        <div className="mx-auto max-w-xl">
          <div className="my-8 space-y-2">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="bg-muted h-2 w-full rounded-full"></div>
            ))}
          </div>
          <div className="mb-6 max-w-xl">
            <div className="bg-muted flex h-56 w-full items-center justify-center rounded">
              <Image className="text-muted-foreground h-16 w-16" />
            </div>
          </div>
          <div className="my-8 space-y-2">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="bg-muted h-2 w-full rounded-full"></div>
            ))}
          </div>
          <div className="my-8 space-y-2">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="bg-muted h-2 w-full rounded-full"></div>
            ))}
          </div>
          <div className="my-8 space-y-2">
            {[...Array(8)].map((_, i) => (
              <div key={i} className="bg-muted h-2 w-full rounded-full"></div>
            ))}
          </div>
          <div className="my-8 space-y-2">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="bg-muted h-2 w-full rounded-full"></div>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}

An advanced navbar with dropdown menus, tooltips, and user profile menu.

"use client"

import * as React from "react"
import {
  Archive,
  ChevronDown,
  FileText,
  HelpCircle,
  LogOut,
  Menu,
  Rocket,
  Settings,
  User,
  X,
} from "lucide-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

const PAGES_ITEMS = [
  {
    title: "Components",
    description:
      "Learn how to use Creative Tim UI, packed with rich components and widgets.",
  },
  {
    title: "Blocks",
    description:
      "Learn how to use Creative Tim UI, packed with rich components for React.",
  },
  {
    title: "Creative Tim UI PRO",
    description:
      "A complete set of UI Elements for building faster websites in less time.",
  },
]

function NavList() {
  return (
    <>
      {LINKS.map(({ icon: Icon, title, href }) => (
        <a
          key={title}
          href={href}
          className="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm"
        >
          <Icon className="h-4 w-4" />
          {title}
        </a>
      ))}
    </>
  )
}

function ProfileMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Avatar className="border-primary h-8 w-8 cursor-pointer border-2">
          <AvatarImage
            src="https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400"
            alt="Profile"
          />
          <AvatarFallback>CT</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>
          <User className="mr-2 h-4 w-4" />
          My Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Settings className="mr-2 h-4 w-4" />
          Edit Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <HelpCircle className="mr-2 h-4 w-4" />
          Support
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-destructive focus:text-destructive">
          <LogOut className="mr-2 h-4 w-4" />
          Logout
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function MenuItem({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (
    <div className="flex flex-col items-start p-2">
      <p className="text-sm font-semibold">{title}</p>
      <p className="text-muted-foreground text-xs">{description}</p>
    </div>
  )
}

export function NavbarComplex() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="bg-card mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
      <div className="flex items-center">
        <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <Separator
          orientation="vertical"
          className="mx-1 hidden h-5 lg:block"
        />
        <div className="hidden lg:flex lg:items-center">
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="h-auto px-3 py-2">
                  <FileText className="mr-2 h-4 w-4" />
                  Pages
                </NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div className="grid w-[600px] grid-cols-5 gap-1 p-2">
                    <Card className="bg-primary text-primary-foreground col-span-2 flex items-center justify-center p-4">
                      <div className="text-center">
                        <Rocket className="mx-auto h-12 w-12" />
                        <h6 className="mt-4 text-sm font-semibold">
                          Creative Tim UI
                        </h6>
                      </div>
                    </Card>
                    <div className="col-span-3 space-y-1">
                      {PAGES_ITEMS.map((item) => (
                        <MenuItem key={item.title} {...item} />
                      ))}
                    </div>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
          <NavList />
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="mr-2 ml-auto lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
        <div className="hidden lg:ml-auto lg:block">
          <ProfileMenu />
        </div>
        <div className="lg:hidden">
          <ProfileMenu />
        </div>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <Accordion type="single" collapsible className="mt-2">
            <AccordionItem value="pages" className="border-none">
              <AccordionTrigger className="p-0 hover:no-underline">
                <div className="hover:bg-accent flex w-full items-center gap-2 rounded-md px-3 py-2">
                  <FileText className="h-4 w-4" />
                  <span className="text-sm">Pages</span>
                </div>
              </AccordionTrigger>
              <AccordionContent className="pb-0">
                <div className="space-y-1">
                  {PAGES_ITEMS.map((item) => (
                    <MenuItem key={item.title} {...item} />
                  ))}
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
          <div className="mt-2 space-y-1">
            <NavList />
          </div>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

A full-featured navbar with a large mega menu for showcasing multiple navigation options.

"use client"

import * as React from "react"
import {
  Archive,
  FileText,
  Globe,
  Grid3x3,
  Hash,
  HelpCircle,
  LogOut,
  Menu,
  Newspaper,
  Phone,
  Settings,
  Sun,
  User,
  Users,
  X,
} from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
import { Separator } from "@/components/ui/separator"

const LINKS = [
  {
    icon: User,
    title: "Account",
    href: "#",
  },
  {
    icon: Archive,
    title: "Blocks",
    href: "#",
  },
  {
    icon: Archive,
    title: "Docs",
    href: "#",
  },
]

const MEGA_MENU_ITEMS = [
  {
    title: "Products",
    description: "Find the perfect solution for your needs.",
    icon: Grid3x3,
  },
  {
    title: "About Us",
    description: "Meet and learn about our dedication",
    icon: Users,
  },
  {
    title: "Blog",
    description: "Find the perfect solution for your needs.",
    icon: Newspaper,
  },
  {
    title: "Services",
    description: "Learn how we can help you achieve your goals.",
    icon: Sun,
  },
  {
    title: "Support",
    description: "Reach out to us for assistance or inquiries",
    icon: Globe,
  },
  {
    title: "Contact",
    description: "Find the perfect solution for your needs.",
    icon: Phone,
  },
  {
    title: "News",
    description: "Read insightful articles, tips, and expert opinions.",
    icon: Newspaper,
  },
  {
    title: "Products",
    description: "Find the perfect solution for your needs.",
    icon: Archive,
  },
  {
    title: "Special Offers",
    description: "Explore limited-time deals and bundles",
    icon: Hash,
  },
]

function NavList() {
  return (
    <>
      {LINKS.map(({ icon: Icon, title, href }) => (
        <a
          key={title}
          href={href}
          className="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-3 py-2 text-sm"
        >
          <Icon className="h-4 w-4" />
          {title}
        </a>
      ))}
    </>
  )
}

function ProfileMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Avatar className="border-primary h-8 w-8 cursor-pointer border-2">
          <AvatarImage
            src="https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400"
            alt="Profile"
          />
          <AvatarFallback>CT</AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>
          <User className="mr-2 h-4 w-4" />
          My Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Settings className="mr-2 h-4 w-4" />
          Edit Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <HelpCircle className="mr-2 h-4 w-4" />
          Support
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-destructive focus:text-destructive">
          <LogOut className="mr-2 h-4 w-4" />
          Logout
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function MenuItem({
  title,
  description,
  icon: Icon,
}: {
  title: string
  description: string
  icon: React.ElementType
}) {
  return (
    <a
      href="#"
      className="hover:bg-accent flex items-start gap-3 rounded-md p-3 transition-colors"
    >
      <div className="bg-muted flex items-center justify-center rounded-md p-2">
        <Icon className="h-5 w-5" />
      </div>
      <div className="flex-1">
        <p className="mb-1 text-sm leading-none font-semibold">{title}</p>
        <p className="text-muted-foreground text-xs">{description}</p>
      </div>
    </a>
  )
}

export function NavbarWithMegaMenu() {
  const [openNav, setOpenNav] = React.useState(false)

  React.useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) setOpenNav(false)
    }
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return (
    <nav className="bg-card mx-auto w-full max-w-screen-xl rounded-lg border px-4 py-2 shadow-sm">
      <div className="flex items-center">
        <a href="#" className="mr-2 ml-2 block py-1 text-sm font-semibold">
          Creative Tim UI
        </a>
        <Separator
          orientation="vertical"
          className="mx-1 hidden h-5 lg:block"
        />
        <div className="hidden lg:flex lg:items-center">
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="h-auto px-3 py-2">
                  <FileText className="mr-2 h-4 w-4" />
                  Pages
                </NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div className="grid w-[800px] grid-cols-3 gap-2 p-4">
                    {MEGA_MENU_ITEMS.map((item) => (
                      <MenuItem key={item.title} {...item} />
                    ))}
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
          <NavList />
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setOpenNav(!openNav)}
          className="mr-2 ml-auto lg:hidden"
        >
          {openNav ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
        </Button>
        <div className="hidden lg:ml-auto lg:block">
          <ProfileMenu />
        </div>
        <div className="lg:hidden">
          <ProfileMenu />
        </div>
      </div>
      <Collapsible open={openNav}>
        <CollapsibleContent>
          <div className="mt-4 grid grid-cols-1 gap-2 md:grid-cols-2">
            {MEGA_MENU_ITEMS.map((item) => (
              <MenuItem key={item.title} {...item} />
            ))}
          </div>
          <div className="mt-4 space-y-1">
            <NavList />
          </div>
        </CollapsibleContent>
      </Collapsible>
    </nav>
  )
}

Component Features

The navbar components are built with shadcn/ui primitives and provide the following features:

Responsive Design: Automatically adapts to mobile, tablet, and desktop screen sizes
Collapsible Menu: Mobile-friendly hamburger menu with smooth transitions
Flexible Layouts: Multiple pre-built layouts for different use cases
Customizable Styling: Easy to theme and customize with Tailwind CSS
Accessible: Built with accessibility best practices using Radix UI primitives

Common Props

The navbar container typically includes these customizable elements:

className: Apply custom styles to the navigation bar
Responsive behavior: Automatically hides/shows elements based on screen size
Layout variants: Horizontal layout on desktop, vertical on mobile

Navigation links support:

href: Link destination
onClick: Custom click handlers
Active states: Highlight current page
Icon support: Display icons alongside text

The mobile menu toggle:

Open/Close state: Controlled with React state
Transition effects: Smooth animations using Collapsible component
Accessibility: Proper ARIA labels and keyboard navigation

Best Practices

Choose the Right Variant: Select a navbar style that matches your application's complexity
Keep It Simple: Don't overcrowd the navbar with too many items
Mobile First: Always test the mobile experience with the collapsible menu
Consistent Branding: Place your logo/brand on the left side for better recognition
Clear CTAs: Use prominent buttons for important actions like "Sign In" or "Get Started"
Accessible Navigation: Ensure all interactive elements are keyboard accessible
Responsive Testing: Test on multiple screen sizes to ensure proper behavior

Menu Pagination

On This Page

Installation Usage Examples Navbar Simple Navbar with Icons and Button Navbar Dark Navbar with Search Navbar Sticky Navbar Complex Navbar with Mega Menu Component Features Common Props Navbar Container Navigation Links Mobile Menu Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.