Navigation Menu

PreviousNext

A collection of links for navigating websites.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/navigation-menu.json

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuContentGrid,
  NavigationMenuContentItem,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/registry/delta-ui/delta/navigation-menu"
 
export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem value="getting-started">
          <NavigationMenuTrigger data-value="getting-started">
            Getting Started
          </NavigationMenuTrigger>
          <NavigationMenuContent value="getting-started">
            <NavigationMenuContentGrid>
              <NavigationMenuLink href="/docs">
                <NavigationMenuContentItem 
                  title="Documentation" 
                  description="Learn how to get started" 
                />
              </NavigationMenuLink>
            </NavigationMenuContentGrid>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Examples

With Isometric Icons

A navigation menu enhanced with beautiful isometric icons for better visual hierarchy.

API Reference

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes