用于站点导航场景的 MoriUI 组件。

导入

import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport } from 'moriui'

示例

概览

站点主导航菜单。

<script setup lang="ts">
  import type { HTMLAttributes } from 'vue'

  import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger
  } from 'moriui'

  interface ListItemProps {
    title: string
    href?: string
    class?: HTMLAttributes['class']
  }

  const components: { title: string, description: string }[] = [
    { title: '弹窗', description: '模态对话框，用于重要操作确认' },
    { title: '悬浮卡片', description: '为有视力的用户预览链接内容' },
    { title: '进度条', description: '显示任务完成进度的指示器' },
    { title: '滚动区域', description: '自定义滚动条样式的内容区域' },
    { title: '标签页', description: '分层内容的面板切换组件' },
    { title: '工具提示', description: '元素聚焦或悬停时弹出的信息' }
  ]
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>概览</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="w-72 p-2">
            <li v-for="item in [{ title: '介绍', desc: '基于 Reka UI 的 Vue 组件库' }, { title: '安装', desc: '依赖安装与应用结构指南' }, { title: '快速开始', desc: '几分钟内搭建你的第一个页面' }]" :key="item.title">
              <NavigationMenuLink class="flex flex-col gap-1 p-2">
                <span class="text-sm font-medium leading-none">{{ item.title }}</span>
                <span class="text-xs text-muted-foreground line-clamp-2">{{ item.desc }}</span>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>组件</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid w-[22rem] gap-1 p-2 md:w-[28rem] md:grid-cols-2">
            <li v-for="c in components" :key="c.title">
              <NavigationMenuLink class="flex flex-col gap-1 p-2">
                <span class="text-sm font-medium leading-none">{{ c.title }}</span>
                <span class="text-xs text-muted-foreground line-clamp-2">{{ c.description }}</span>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>文档</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="w-56 p-2">
            <li>
              <NavigationMenuLink class="flex flex-col gap-1 p-2">
                <span class="text-sm font-medium leading-none">入门指南</span>
                <span class="text-xs text-muted-foreground">了解核心概念与用法</span>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink class="flex flex-col gap-1 p-2">
                <span class="text-sm font-medium leading-none">自定义主题</span>
                <span class="text-xs text-muted-foreground">通过 Token 定制视觉风格</span>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink class="flex flex-col gap-1 p-2">
                <span class="text-sm font-medium leading-none">无障碍</span>
                <span class="text-xs text-muted-foreground">遵循 WAI-ARIA 标准</span>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink class="text-sm font-medium">
          指南
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

RTL

从右到左的导航菜单。

<script setup lang="ts">
  import {
    DirectionProvider,
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>الملخص</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-64 gap-1 p-2">
              <li>
                <NavigationMenuLink class="flex flex-col gap-1">
                  <span class="text-sm font-medium">المقدمة</span>
                  <span class="text-xs text-muted-foreground">تعرف على المكتبة وميزاتها</span>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink class="flex flex-col gap-1">
                  <span class="text-sm font-medium">التثبيت</span>
                  <span class="text-xs text-muted-foreground">دليل البدء السريع</span>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>المكونات</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-56 gap-1 p-2">
              <li>
                <NavigationMenuLink class="flex flex-col gap-1">
                  <span class="text-sm font-medium">الأزرار</span>
                  <span class="text-xs text-muted-foreground">أنواع وأحجام مختلفة</span>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink class="flex flex-col gap-1">
                  <span class="text-sm font-medium">النماذج</span>
                  <span class="text-xs text-muted-foreground">حقول الإدخال والتحقق</span>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink class="text-sm font-medium">
            الوثائق
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </DirectionProvider>
</template>

使用说明

组合方式

NavigationMenu 由 List、Item、Trigger 和 Content 组成，Viewport 管理弹出内容的定位。

RTL

方向由 DirectionProvider 控制。

变体

NavigationMenu 没有视觉变体；viewport 定位由 Reka UI NavigationMenu 管理。

可访问性

NavigationMenu 复用 Reka UI 的 navigation/menubar ARIA 和键盘导航。Root 元素默认输出 role="navigation"；Trigger 和 Content 自动关联。

API 参考

属性	类型	默认值	说明
`NavigationMenu v-model:modelValue`	`string`	`undefined`	当前激活菜单项的值。
`NavigationMenu defaultValue`	`string`	`undefined`	非受控初始激活项。
`NavigationMenu delayDuration`	`number`	`200`	延迟打开/关闭的毫秒数。
`NavigationMenuList class`	`HTMLAttributes["class"]`	`undefined`	合并到列表的调用方类。
`NavigationMenuTrigger disabled`	`boolean`	`false`	禁用触发器。
`NavigationMenuLink as / asChild`	`string \| Component / boolean`	`'a' / false`	链接的元素组合能力。
`NavigationMenuLink active`	`boolean`	`false`	标记当前激活的导航链接。
`NavigationMenuViewport class`	`HTMLAttributes["class"]`	`undefined`	合并到视口容器的调用方类。

Navigation Menu 站点导航