Components
Navigation Menu
A navigation component with trigger items that open dropdown content panels for site navigation.
The Navigation Menu component provides a horizontal navigation bar with items that can expand to show rich dropdown content. It supports trigger buttons with chevron indicators, positioned content panels, and navigation links. Built for site-level navigation patterns.
Preview
Installation
npx novaui-cli add navigation-menuImport
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
navigationMenuTriggerStyle,
} from 'novaui-components'Basic Usage
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
navigationMenuTriggerStyle,
} from 'novaui-components'
import { Text, View } from 'react-native'
export function BasicNavigationMenu() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
<NavigationMenuContent>
<View className="gap-3 p-4 w-[300px]">
<NavigationMenuLink>
<Text className="text-sm font-medium">Introduction</Text>
<Text className="text-sm text-muted-foreground">
Learn the basics of the framework.
</Text>
</NavigationMenuLink>
<NavigationMenuLink>
<Text className="text-sm font-medium">Installation</Text>
<Text className="text-sm text-muted-foreground">
How to install and set up your project.
</Text>
</NavigationMenuLink>
</View>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<View className="gap-3 p-4 w-[300px]">
<NavigationMenuLink>
<Text className="text-sm font-medium">Button</Text>
<Text className="text-sm text-muted-foreground">
Interactive button component.
</Text>
</NavigationMenuLink>
<NavigationMenuLink>
<Text className="text-sm font-medium">Dialog</Text>
<Text className="text-sm text-muted-foreground">
Modal dialog overlays.
</Text>
</NavigationMenuLink>
</View>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Documentation
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)
}With Active Link
Highlight the currently active navigation link:
<NavigationMenuLink active>
<Text className="text-sm font-medium">Dashboard</Text>
<Text className="text-sm text-muted-foreground">
View your analytics and data.
</Text>
</NavigationMenuLink>Props API
NavigationMenu
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled active item value |
onValueChange | (value: string | undefined) => void | - | Callback when active item changes |
className | string | - | Additional CSS classes |
NavigationMenuList
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
NavigationMenuItem
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | auto-generated | Unique value to identify this item |
NavigationMenuTrigger
Extends React.ComponentPropsWithoutRef<typeof Pressable>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
NavigationMenuContent
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger |
sideOffset | number | 4 | Offset from trigger in pixels |
className | string | - | Additional CSS classes |
NavigationMenuLink
Extends React.ComponentPropsWithoutRef<typeof Pressable>:
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Whether the link is currently active |
className | string | - | Additional CSS classes |
navigationMenuTriggerStyle
A cva utility that returns the trigger button styling. Use on NavigationMenuLink to style plain links to match trigger items.
Best Practices
- Use for site navigation: Best suited for top-level site nav with rich dropdowns
- Keep content focused: Each trigger's dropdown should cover a single topic area
- Use links for leaf items: Use
NavigationMenuLinkwithnavigationMenuTriggerStylefor items without dropdowns - Mark the active link: Set
activeon the current page's link for visual feedback - Limit trigger count: Aim for 3–6 top-level navigation items
Related Components
- Menubar - For application-level menu bars
- Tabs - For in-page content switching
- Breadcrumb - For page-level navigation hierarchy