Skip to content
Docs/NavigationMenu

NavigationMenu

Horizontal navigation menu with active state highlighting.

Usage

tsx
1import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@storm-ds/ui'
2
3<NavigationMenu>
4 <NavigationMenuItem>
5 <NavigationMenuLink href="/" active>Home</NavigationMenuLink>
6 </NavigationMenuItem>
7 <NavigationMenuItem>
8 <NavigationMenuLink href="/about">About</NavigationMenuLink>
9 </NavigationMenuItem>
10</NavigationMenu>

Default

Props

PropTypeDefaultDescription
hrefstring-Link URL (NavigationMenuLink)
activebooleanfalseHighlights current page (NavigationMenuLink)
classNamestring-Custom classes

Use with AI

Create a Next.js component using Storm UI's NavigationMenu. Import: `import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@storm-ds/ui'`. Horizontal nav with anchor links. Use active prop on current page link. Example: `<NavigationMenu><NavigationMenuItem><NavigationMenuLink href="/" active>Home</NavigationMenuLink></NavigationMenuItem></NavigationMenu>`