Navigation Menu
An accessible navigation menu component with support for dropdown panels, mega menus, and keyboard navigation. Build complex site navigations with smooth animations and responsive behavior.
Live Preview
Click on a menu item to reveal its dropdown panel. The navigation menu supports both hover and click triggers.
Click on Products, Solutions, or Resources to see the dropdown panels.
1<NavigationMenu trigger="click">2<NavigationMenuItem>3 <NavigationMenuTrigger>Products</NavigationMenuTrigger>4 <NavigationMenuContent>5 <div className="grid grid-cols-2 gap-4 p-4">6 <NavigationMenuLink href="/analytics">7 Analytics8 </NavigationMenuLink>9 <NavigationMenuLink href="/security">10 Security11 </NavigationMenuLink>12 </div>13 </NavigationMenuContent>14</NavigationMenuItem>15</NavigationMenu>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the NavigationMenu components into your file.
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink,
} from '@/components/aidash/navigation-menu';Basic Usage
A simple navigation menu with plain links and no dropdown panels.
1<NavigationMenu>2<NavigationMenuItem>3 <NavigationMenuLink href="/">Home</NavigationMenuLink>4</NavigationMenuItem>5<NavigationMenuItem>6 <NavigationMenuLink href="/about">About</NavigationMenuLink>7</NavigationMenuItem>8<NavigationMenuItem>9 <NavigationMenuLink href="/blog">Blog</NavigationMenuLink>10</NavigationMenuItem>11<NavigationMenuItem>12 <NavigationMenuLink href="/contact">Contact</NavigationMenuLink>13</NavigationMenuItem>14</NavigationMenu>With Dropdown Panels
Menu items with rich content panels that appear on hover or click.
1<NavigationMenu trigger="hover">2<NavigationMenuItem>3 <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>4 <NavigationMenuContent>5 <div className="flex flex-col gap-3 p-4">6 <NavigationMenuLink href="/intro">7 Introduction8 </NavigationMenuLink>9 <NavigationMenuLink href="/install">10 Installation11 </NavigationMenuLink>12 </div>13 </NavigationMenuContent>14</NavigationMenuItem>15</NavigationMenu>Mega Menu
Wide dropdown with multi-column layout for complex navigation structures.
1<NavigationMenu>2<NavigationMenuItem>3 <NavigationMenuTrigger>Platform</NavigationMenuTrigger>4 <NavigationMenuContent className="w-[600px]">5 <div className="grid grid-cols-3 gap-6 p-6">6 <div>7 <h4 className="text-xs font-semibold uppercase mb-3">8 Develop9 </h4>10 <NavigationMenuLink href="/api">11 API Gateway12 </NavigationMenuLink>13 <NavigationMenuLink href="/functions">14 Functions15 </NavigationMenuLink>16 </div>17 {/* ... more columns */}18 </div>19 </NavigationMenuContent>20</NavigationMenuItem>21</NavigationMenu>With Icons
Add leading icons to menu items for better visual hierarchy and scannability.
1<NavigationMenu>2<NavigationMenuItem>3 <NavigationMenuLink href="/dashboard">4 <GridViewIcon /> Dashboard5 </NavigationMenuLink>6</NavigationMenuItem>7<NavigationMenuItem>8 <NavigationMenuLink href="/analytics">9 <AnalyticsIcon /> Analytics10 </NavigationMenuLink>11</NavigationMenuItem>12<NavigationMenuItem>13 <NavigationMenuLink href="/settings">14 <SettingsIcon /> Settings15 </NavigationMenuLink>16</NavigationMenuItem>17</NavigationMenu>Vertical
Vertical navigation menu variant for sidebars and stacked layouts.
1<NavigationMenu orientation="vertical">2<NavigationMenuItem>3 <NavigationMenuTrigger>4 <GridViewIcon /> Overview5 </NavigationMenuTrigger>6 <NavigationMenuContent>7 <NavigationMenuLink href="/dashboard">8 Dashboard9 </NavigationMenuLink>10 <NavigationMenuLink href="/activity">11 Activity12 </NavigationMenuLink>13 </NavigationMenuContent>14</NavigationMenuItem>15<NavigationMenuItem>16 <NavigationMenuTrigger>17 <SettingsIcon /> Settings18 </NavigationMenuTrigger>19 <NavigationMenuContent>20 {/* ... */}21 </NavigationMenuContent>22</NavigationMenuItem>23</NavigationMenu>Props API
Complete list of props accepted by NavigationMenu and NavMenuItem.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavMenuItem[] | [] | Array of navigation menu items with optional dropdown content |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the navigation menu |
| trigger | 'hover' | 'click' | 'hover' | How dropdown panels are activated |
| delayDuration | number | 200 | Milliseconds before the dropdown opens on hover |
| className | string | '' | Additional CSS classes for the root element |
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text label for the menu item |
| href | string | — | Link URL if the item is a simple link |
| icon | ReactNode | — | Optional icon rendered before the label |
| children | ReactNode | — | Dropdown panel content shown when active |
| disabled | boolean | false | Disable interaction on the item |
children prop on NavigationMenuItem accepts any ReactNode for fully custom dropdown content. When no children is provided, the item renders as a simple navigation link.Accessibility
Built-in accessibility features for keyboard navigation and screen readers.
Keyboard Navigation
Full keyboard support with Tab to move between items and Enter or Space to activate dropdown panels.
Arrow Key Support
Use ArrowLeft and ArrowRight to navigate between top-level items. ArrowDown enters the dropdown content.
Escape to Close
Press Escape to close the active dropdown panel and return focus to the trigger element.
ARIA Attributes
Uses role="menubar", role="menuitem", aria-expanded, and aria-haspopup for proper screen reader announcements.
1{/* The component handles ARIA automatically */}2<NavigationMenu>3<NavigationMenuItem>4 {/* Renders with role="menuitem" and aria-expanded */}5 <NavigationMenuTrigger>Products</NavigationMenuTrigger>6 <NavigationMenuContent>7 {/* Focus is trapped within the panel */}8 <NavigationMenuLink href="/analytics">9 Analytics10 </NavigationMenuLink>11 </NavigationMenuContent>12</NavigationMenuItem>13</NavigationMenu>Related
Other components that work well alongside NavigationMenu.