Navigation Menu Component Demo

import {
  NavMenu,
  NavMenuItem,
  NavMenuDropdownItem,
} from "@/components/ui/nav-menu"

export function MyNavigation() {
  return (
    <NavMenu>
      <NavMenuItem isActive>
        Home
      </NavMenuItem>
      
      <NavMenuItem hasDropdown dropdownColumns={2}>
        Components
        <NavMenuDropdownItem 
          title="Alert Dialog" 
          subtitle="A modal dialog that interrupts the user with important content."
        />
        <NavMenuDropdownItem 
          title="Progress" 
          subtitle="Displays an indicator showing the completion progress of a task."
        />
        <NavMenuDropdownItem 
          title="Tabs" 
          subtitle="A set of layered sections of content - known as tab panels."
        />
        <NavMenuDropdownItem 
          title="Hover Card" 
          subtitle="For sighted users to preview content available behind a link."
        />
      </NavMenuItem>
      
      <NavMenuItem hasDropdown>
        Resources
        <NavMenuDropdownItem 
          title="Components" 
          subtitle="Browse all components in the library."
        />
        <NavMenuDropdownItem 
          title="Documentation" 
          subtitle="Learn how to use the library."
        />
        <NavMenuDropdownItem 
          title="Blog" 
          subtitle="Read our latest blog posts."
        />
      </NavMenuItem>
      
      <NavMenuItem>
        Docs
      </NavMenuItem>
    </NavMenu>
  )
}