registry:component

Header

v0.2.0beta

Top navigation with brand mark, app sections, and account menus.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/aavya-header.json

npx shadcn@latest add https://registry.aavya.com/r/aavya-header.json

Live Preview

Preview Route

Open /

Dependencies

buttondropdown-menuavatar

Usage Snippet

import Header from '@/components/layout/header.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Header />
    </div>
  )
}

Source Preview

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  ChevronDown,
  Code2,
  Download,
  ImageIcon,
  Layers,
  Menu,
  Palette,
  Search,
  WandSparkles,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'
import { Logo } from '@/components/ui/logo'
import { ThemeToggle } from '@/components/layout/theme-toggle'
import { ProfileDropdown } from '@/components/blocks/profile-dropdown'
import { cn } from '@/lib/utils'

// ---------------------------------------------------------------------------
// Nav data
// ---------------------------------------------------------------------------

const navItems = [
  {
    label: 'Guidelines',
    href: '/brand-guidelines',
    icon: Palette,
    children: [
      {
        label: 'Overview',
        href: '/brand-guidelines',
        description: 'Mission, vision, values, and brand principles.',
      },
      {
        label: 'Logo',
        href: '/brand-guidelines/logo',
        description: