Navigation Menu

1"use client"23import {4  NavigationMenu,5  NavigationMenuList,6  NavigationMenuItem,7  NavigationMenuTrigger,8  NavigationMenuContent,9  NavigationMenuLink,10} from '@/components/ui/navigation-menu'1112function BasicNavigationMenu() {13  return (14    <NavigationMenu>15      <NavigationMenuList>16        <NavigationMenuItem value="getting-started">17          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>18          <NavigationMenuContent className="w-[400px] md:w-[500px]">19            <ul className="grid gap-3 p-4 md:grid-cols-2">20              <li>21                <NavigationMenuLink href="/docs">22                  <div className="text-sm font-medium">Introduction</div>23                  <p className="text-sm text-muted-foreground mt-1">24                    Learn the basics.25                  </p>26                </NavigationMenuLink>27              </li>28              <li>29                <NavigationMenuLink href="/docs/installation">30                  <div className="text-sm font-medium">Installation</div>31                  <p className="text-sm text-muted-foreground mt-1">32                    How to install and configure.33                  </p>34                </NavigationMenuLink>35              </li>36            </ul>37          </NavigationMenuContent>38        </NavigationMenuItem>39      </NavigationMenuList>40    </NavigationMenu>41  )42}

1"use client"23import {4  NavigationMenu,5  NavigationMenuList,6  NavigationMenuItem,7  NavigationMenuTrigger,8  NavigationMenuContent,9  NavigationMenuLink,10} from '@/components/ui/navigation-menu'1112function NavigationWithLinks() {13  return (14    <NavigationMenu>15      <NavigationMenuList>16        <NavigationMenuItem value="docs">17          <NavigationMenuTrigger>Documentation</NavigationMenuTrigger>18          <NavigationMenuContent className="w-[300px]">19            <ul className="grid gap-3 p-4">20              <li>21                <NavigationMenuLink href="/docs/intro">22                  <div className="text-sm font-medium">Introduction</div>23                </NavigationMenuLink>24              </li>25              <li>26                <NavigationMenuLink href="/docs/api" active={true}>27                  <div className="text-sm font-medium">API Reference</div>28                </NavigationMenuLink>29              </li>30            </ul>31          </NavigationMenuContent>32        </NavigationMenuItem>3334        <NavigationMenuItem>35          <NavigationMenuLink href="/blog"36            className="h-9 px-4 py-2 inline-flex items-center text-sm font-medium">37            Blog38          </NavigationMenuLink>39        </NavigationMenuItem>40      </NavigationMenuList>41    </NavigationMenu>42  )43}