{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu-04",
  "title": "Navigation Menu with Active Item",
  "description": "A navigation menu with active item styling",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "navigation-menu"
  ],
  "files": [
    {
      "path": "src/components/customized/navigation-menu/navigation-menu-04.tsx",
      "content": "import { BookOpen, Home, Rss } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n} from \"@/registry/ui/navigation-menu\";\n\nconst navigationMenuItems = [\n  { title: \"Home\", href: \"#\", icon: Home, isActive: true },\n  { title: \"Blog\", href: \"#blog\", icon: Rss },\n  { title: \"Docs\", href: \"#docs\", icon: BookOpen },\n];\n\nexport default function NavigationMenuWithActiveItem() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        {navigationMenuItems.map((item) => (\n          <NavigationMenuItem key={item.title}>\n            <NavigationMenuLink\n              active={item.isActive}\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link className=\"flex-row items-center gap-2.5\" href={item.href}>\n                <item.icon className=\"h-5 w-5 shrink-0\" />\n                {item.title}\n              </Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        ))}\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}