Use NavigationMenu for primary site or app navigation.
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from '@tile-ui/react';
export default function NavigationMenuDemo() {
return (
<NavigationMenu>
<NavigationMenuList>
Registry install
pnpm dlx shadcn@latest add @tile-ui/navigation-menu
Package usage
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from '@tile-ui/react';
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="docs">
<NavigationMenuTrigger>Docs</NavigationMenuTrigger>
<NavigationMenuContent>Documentation links.</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
Highlights
- Viewport mode
- Item, trigger, and content
- Link with active state
Registry dependencies
| Item | Purpose |
|---|
navigation-menu | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
| Prop | Type | Default |
|---|
viewport | boolean | true |
value | string | — |
defaultValue | string | — |
onValueChange | (value: string | undefined) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
| Prop | Type | Default |
|---|
active | boolean | — |
asChild | boolean | — |