registry:component

Header — Nav + Breadcrumb

v0.1.0alpha

Two-row header: NavigationMenu flyouts on row 1, breadcrumb + date-range toggle on row 2.

Registry Endpoint

Open JSON

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

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

Live Preview

Dependencies

navigation-menudropdown-menubreadcrumbtoggle-groupavatarbuttonbadge

Usage Snippet

import HeaderNavBreadcrumb from '@/components/layout/header-nav-breadcrumb.tsx'

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

Source Preview

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Fragment } from 'react'
import {
  ChevronDown,
  Code2,
  Download,
  Home,
  ImageIcon,
  Layers,
  Menu,
  Palette,
  Search,
  WandSparkles,
} from 'lucide-react'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'

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',
        hr