Navigation Menu

Preview

import React from "react";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
} from "@/components/ui/NavigationMenu";

export function NavigationMenuDemo() {
  return {
  return (
    <NavigationMenu className="relative z-10 w-full justify-end flex">
      <NavigationMenuList className="center m-0 flex p-1">
        {/* Product Menu Item */}
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            <li>
              <span>
                Product <ChevronDownIcon className="icon" />
              </span>
            </li>
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul>
              <li>
                <NavigationMenuLink href="#">Overview</NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">Features</NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">Pricing</NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        {/* Solutions Menu Item */}
        <NavigationMenuItem>
          <NavigationMenuTrigger>
            <li>
              <span>
                Solutions <ChevronDownIcon className="icon" />
              </span>
            </li>
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul>
              <li>
                <NavigationMenuLink href="#">Enterprise</NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">Small Business</NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        {/* Company Menu Item (No Submenu) */}
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Company</NavigationMenuLink>
        </NavigationMenuItem>

        {/* Blog Menu Item (No Submenu) */}
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Blog</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
};

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/navigation-menu

Manual

Install the following dependencies:

pnpm install radix-ui

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the NavigationMenu component into your components/ui/NavigationMenu.tsx file.

/**
 * @description A collection of links for navigating websites.
 */
import * as React from "react";
import { NavigationMenu as NavigationMenuRadix } from "radix-ui";

import { cn } from "@/utils/class-names";

function NavigationMenu({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Root>) {
  return (
    <NavigationMenuRadix.Root
      data-slot="navigation-menu"
      className={cn(className)}
      {...props}
    >
      {children}
    </NavigationMenuRadix.Root>
  );
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.List>) {
  return (
    <NavigationMenuRadix.List
      data-slot="navigation-menu-list"
      className={cn("flex", className)}
      {...props}
    />
  );
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Item>) {
  return (
    <NavigationMenuRadix.Item
      data-slot="navigation-menu-item"
      className={cn("relative", className)}
      {...props}
    />
  );
}

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Trigger>) {
  return (
    <NavigationMenuRadix.Trigger
      data-slot="navigation-menu-trigger"
      {...props}
      className={cn(
        "p-0.5 px-1 hover:bg-accent-3 flex relative cursor-pointer",
        className
      )}
    >
      {children}
    </NavigationMenuRadix.Trigger>
  );
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Content>) {
  return (
    <NavigationMenuRadix.Content
      data-slot="navigation-menu-content"
      className={cn(
        "absolute top-full mt-0.5 bg-gray-1 shadow-md rounded-md border border-gray-a6 overflow-hidden",
        className
      )}
      {...props}
    />
  );
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Viewport>) {
  return (
    <NavigationMenuRadix.Viewport
      data-slot="navigation-menu-viewport"
      {...props}
      className={cn(className)}
    />
  );
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Link>) {
  return (
    <NavigationMenuRadix.Link
      data-slot="navigation-menu-link"
      className={cn(
        "p-0.5 px-1 hover:bg-accent-3 flex relative cursor-pointer items-center",
        className
      )}
      {...props}
    />
  );
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuRadix.Indicator>) {
  return (
    <NavigationMenuRadix.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(className)}
      {...props}
    >
      <div />
    </NavigationMenuRadix.Indicator>
  );
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
};

Usage

NavigationMenuDemo

export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList className="flex-wrap">
        <NavigationMenuItem>
          <NavigationMenuTrigger>Home</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="w-[400px]">
              <ListItem href="/docs" title="Introduction">
                Re-usable components built using Radix UI and Tailwind CSS.
              </ListItem>
              <ListItem href="/docs/installation" title="Installation">
                How to install dependencies and structure your app.
              </ListItem>
              <ListItem href="/docs/primitives/typography" title="Typography">
                Styles for headings, paragraphs, lists...etc
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-0.5 w-[500px] grid-cols-2">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink>Docs</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>List</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-1 w-[400px]">
              <li>
                <NavigationMenuLink>
                  <div>
                    <div className="font-medium">Components</div>
                    <div>Browse all components in the library.</div>
                  </div>
                </NavigationMenuLink>
                <NavigationMenuLink>
                  <div>
                    <div className="font-medium">Documentation</div>
                    <div>Learn how to use the library.</div>
                  </div>
                </NavigationMenuLink>
                <NavigationMenuLink>
                  <div>
                    <div>Blog</div>
                    <div>Read our latest blog posts.</div>
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem className="block">
          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-1">
              <li>
                <NavigationMenuLink>Components</NavigationMenuLink>
                <NavigationMenuLink>Documentation</NavigationMenuLink>
                <NavigationMenuLink>Blocks</NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem className="block">
          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-1">
              <li>
                <NavigationMenuLink>Backlog</NavigationMenuLink>
                <NavigationMenuLink>To Do</NavigationMenuLink>
                <NavigationMenuLink>Done</NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Preview

Installation

Manual

Usage

NavigationMenuDemo

On this page