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.
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Menu content |
NavigationMenuList
Container for navigation menu items.
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Menu items |
NavigationMenuItem
A single navigation menu item container.
NavigationMenuTrigger
The button that toggles the dropdown content visibility.
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Trigger content |
NavigationMenuContent
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 |
NavigationMenuLink
A navigational link component.
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Additional CSS classes |
href | string | - | Link destination |
asChild | boolean | false | Render as child element |
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 contenttext-theme-content
- Primary text colorhover:bg-theme-accent
- Hover backgroundfocus:bg-theme-accent
- Focus backgroundborder-theme-mark-light
- Border colorsshadow-theme-md
- Drop shadows
Best Practices
- Clear hierarchy: Use proper nesting for dropdown content
- Consistent styling: Maintain visual consistency across navigation items
- Accessible labels: Use descriptive text for navigation links
- Responsive design: Consider mobile navigation patterns
- Performance: Avoid heavy content in dropdown menus
- 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