Navigation Menu

A collection of links for navigating websites, built on top of Radix UI Navigation Menu primitive.

Installation

npm install @darksnow-ui/navigation-menu

Peer Dependencies

npm install react react-dom

Usage

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

export function NavigationMenuExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-3 p-4 md:w-[400px]">
              <li>
                <NavigationMenuLink href="/docs">
                  Documentation
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Examples

Basic Navigation Menu

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
          <li className="row-span-3">
            <NavigationMenuLink asChild>
              <a
                className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-theme-bg-soft/50 to-theme-bg-soft p-6 no-underline outline-none focus:shadow-md"
                href="/"
              >
                <div className="mb-2 mt-4 text-lg font-medium">
                  DarkSnow UI
                </div>
                <p className="text-sm leading-tight text-theme-content-muted">
                  Beautiful components built with Radix UI and Tailwind CSS.
                </p>
              </a>
            </NavigationMenuLink>
          </li>
          <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 w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
          <ListItem href="/docs/primitives/alert-dialog" title="Alert Dialog">
            A modal dialog that interrupts the user with important content.
          </ListItem>
          <ListItem href="/docs/primitives/hover-card" title="Hover Card">
            For sighted users to preview content available behind a link.
          </ListItem>
          <ListItem href="/docs/primitives/progress" title="Progress">
            Displays an indicator showing the completion progress of a task.
          </ListItem>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="/docs"
      >
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Simple Navigation Links

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        Home
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        About
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        Services
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        Contact
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Navigation with Icons

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        <HomeIcon className="h-4 w-4 mr-2" />
        Home
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        <SearchIcon className="h-4 w-4 mr-2" />
        Search
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        className={navigationMenuTriggerStyle()}
        href="#"
      >
        <UserIcon className="h-4 w-4 mr-2" />
        Profile
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Centered Navigation

<div className="flex justify-center">
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuLink
          className={navigationMenuTriggerStyle()}
          href="#"
        >
          Home
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink
          className={navigationMenuTriggerStyle()}
          href="#"
        >
          About
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink
          className={navigationMenuTriggerStyle()}
          href="#"
        >
          Services
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink
          className={navigationMenuTriggerStyle()}
          href="#"
        >
          Contact
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

Custom List Item Component

const ListItem = forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          ref={ref}
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-theme-accent hover:text-theme-accent-content focus:bg-theme-accent focus:text-theme-accent-content",
            className,
          )}
          {...props}
        >
          <div className="text-sm font-medium leading-none">{title}</div>
          <p className="line-clamp-2 text-sm leading-snug text-theme-content-muted">
            {children}
          </p>
        </a>
      </NavigationMenuLink>
    </li>
  )
})

Components

NavigationMenu

The root container component that contains all navigation menu parts.

NavigationMenuList

Container for navigation menu items.

NavigationMenuItem

A single navigation menu item container.

NavigationMenuTrigger

The button that toggles the dropdown content visibility.

NavigationMenuContent

The container for dropdown content that appears when trigger is activated.

NavigationMenuLink

A navigational link component.

navigationMenuTriggerStyle

A utility function that returns the default trigger styles.

import { navigationMenuTriggerStyle } from "@darksnow-ui/navigation-menu"

<NavigationMenuLink className={navigationMenuTriggerStyle()}>
  Link
</NavigationMenuLink>

Accessibility

• Full keyboard navigation support with arrow keys
• Screen reader accessible with proper ARIA attributes
• Focus management and focus indicators
• Supports escape key to close dropdowns
• Proper focus trapping within dropdown content
• ARIA expanded states for screen readers

Styling

The Navigation Menu components use DarkSnow UI design tokens:

• Container: Flexbox layout with proper spacing
• Triggers: Hover and focus states with theme accent colors
• Content: Animated dropdown with shadows and borders
• Links: Proper focus states and transitions
• Viewport: Smooth animations for content changes

Theme Variables Used

• bg-theme-surface - Background color for triggers and content
• text-theme-content - Primary text color
• hover:bg-theme-accent - Hover background
• focus:bg-theme-accent - Focus background
• border-theme-mark-light - Border colors
• shadow-theme-md - Drop shadows

Best Practices

1. Clear hierarchy: Use proper nesting for dropdown content
2. Consistent styling: Maintain visual consistency across navigation items
3. Accessible labels: Use descriptive text for navigation links
4. Responsive design: Consider mobile navigation patterns
5. Performance: Avoid heavy content in dropdown menus
6. SEO friendly: Use semantic HTML structure

Common Patterns

Site Header Navigation

<header className="border-b">
  <nav className="container mx-auto px-4">
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="/" className={navigationMenuTriggerStyle()}>
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-3 p-4 md:grid-cols-2">
              <ListItem href="/products/web" title="Web Apps">
                Modern web applications
              </ListItem>
              <ListItem href="/products/mobile" title="Mobile Apps">
                iOS and Android applications
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </nav>
</header>

Documentation Navigation

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 md:w-[500px]">
          <ListItem href="/docs/installation" title="Installation">
            How to install and set up the library
          </ListItem>
          <ListItem href="/docs/configuration" title="Configuration">
            Configure your project settings
          </ListItem>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Related Components

• Menubar - Desktop application-style menus
• Dropdown Menu - Context menus and dropdowns
• Button - Interactive button components