Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@darksnow-ui/navigation-menu

darksnow-ui82MIT1.0.0TypeScript support: included

navigation-menu component for DarkSnow UI

react, navigation-menu, component, ui, darksnow, typescript

readme

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>
<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>
<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

The root container component that contains all navigation menu parts.

Prop Type Default Description
className string - Additional CSS classes
children React.ReactNode - Menu content

Container for navigation menu items.

Prop Type Default Description
className string - Additional CSS classes
children React.ReactNode - Menu items

A single navigation menu item container.

The button that toggles the dropdown content visibility.

Prop Type Default Description
className string - Additional CSS classes
children React.ReactNode - Trigger content

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

Prop Type Default Description
className string - Additional CSS classes
children React.ReactNode - Content to display

A navigational link component.

Prop Type Default Description
className string - Additional CSS classes
href string - Link destination
asChild boolean false Render as child element

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>