Command Palette

Search for a command to run...

Navigation Menu

shadcn/ui

A collection of links for navigating websites.

import {	NavigationMenu,	NavigationMenuContent,	NavigationMenuItem,	NavigationMenuLink,	NavigationMenuList,	NavigationMenuTrigger,} from "@/registry/optics/navigation-menu";<NavigationMenu>	<NavigationMenuList>		<NavigationMenuItem>			<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>			<NavigationMenuContent>				<ul className="grid gap-3 p-4 w-[400px]">					<li>						<NavigationMenuLink asChild>							<a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">								<div className="text-sm font-medium leading-none">Introduction</div>								<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">									Re-usable components built using Radix UI and Tailwind CSS.								</p>							</a>						</NavigationMenuLink>					</li>				</ul>			</NavigationMenuContent>		</NavigationMenuItem>	</NavigationMenuList></NavigationMenu>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/navigation-menu.json

Props

<NavigationMenu />
Name
Type
className
string
viewport
boolean (default: true)
children
React.ReactNode

<NavigationMenuList />
Name
Type
className
string
<NavigationMenuItem />
Name
Type
className
string
<NavigationMenuTrigger />
Name
Type
className
string
children
React.ReactNode
<NavigationMenuContent />
Name
Type
className
string
<NavigationMenuLink />
Name
Type
className
string
<NavigationMenuViewport />
Name
Type
className
string
<NavigationMenuIndicator />
Name
Type
className
string
Multi SelectPagination