Navigation Menu

A top nav with trigger buttons and popover content panels.

Installation

bash
npx shadcn@latest add navigation-menu

Import

import {  NavigationMenu, NavigationMenuList, NavigationMenuItem,  NavigationMenuTrigger, NavigationMenuContent,  NavigationMenuLink, navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"

Example

<NavigationMenu>  <NavigationMenuList>    <NavigationMenuItem>      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px]">          <li className="row-span-3">            <NavigationMenuLink asChild>              <a href="/" className="flex h-full w-full flex-col rounded-md bg-muted p-6">                <div className="mb-2 mt-4 text-lg font-medium">RDS</div>                <p className="text-sm text-muted-foreground">                  Open-source design system for multimedia platforms.                </p>              </a>            </NavigationMenuLink>          </li>          <li>            <NavigationMenuLink asChild>              <a href="/getting-started">Introduction</a>            </NavigationMenuLink>          </li>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>    <NavigationMenuItem>      <NavigationMenuLink href="/elements" className={navigationMenuTriggerStyle()}>        Components      </NavigationMenuLink>    </NavigationMenuItem>  </NavigationMenuList></NavigationMenu>