导航菜单

用于网站导航的链接集合。

Component Source API Reference

安装 ​

pnpm dlx shadcn-vue@latest add navigation-menu

使用方法 ​

vue
<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@/components/ui/navigation-menu'
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>项目一</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink>链接</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

示例 ​

链接组件 ​

使用 Nuxt 的 <NuxtLink /> 组件时，可通过 navigationMenuTriggerStyle() 为触发器应用正确的样式。

ts
import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
vue
<template>
  <NavigationMenuItem>
    <NuxtLink v-slot="{ isActive, href, navigate }" to="/docs" custom>
      <NavigationMenuLink :active="isActive" :href :class="navigationMenuTriggerStyle()" @click="navigate">
        文档
      </NavigationMenuLink>
    </NuxtLink>
  </NavigationMenuItem>
</template>
Edit this page on GitHub