NavigationMenu

Navigation menu with viewport.

Use NavigationMenu for primary site or app navigation.

import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent } from '@tile-ui/vue';
 
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/vue';
 
<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