导航菜单 Navigation Menu

#基础用法

navigation-menu/basic Vue React

navigation-menu/basic.vue

<script setup lang="ts">
import { NavigationMenu } from "@bysages/vue";
</script>

<template>
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item value="overview">
        <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <span class="block px-(--bs-padding-md) pb-1 pt-2 text-xs tracking-label text-tertiary">
            Get started
          </span>
          <NavigationMenu.Link href="#quick-start">
            <span class="flex flex-col gap-1">
              <strong>Quick start</strong>
              <span class="text-secondary text-sm"> Install and assemble </span>
            </span>
          </NavigationMenu.Link>
          <NavigationMenu.Link href="#styling">
            <span class="flex flex-col gap-1">
              <strong>Styling</strong>
              <span class="text-secondary text-sm"> Tokens, hairlines, light </span>
            </span>
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item>
        <NavigationMenu.Link href="#guides" :current="true">Guides</NavigationMenu.Link>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="resources">
        <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <span class="block px-(--bs-padding-md) pb-1 pt-2 text-xs tracking-label text-tertiary">
            Learn
          </span>
          <NavigationMenu.Link href="#accessibility">
            <span class="flex flex-col gap-1">
              <strong>Accessibility</strong>
              <span class="text-secondary text-sm"> Contrast and density tiers </span>
            </span>
          </NavigationMenu.Link>
          <NavigationMenu.Link href="#releases">
            <span class="flex flex-col gap-1">
              <strong>Releases</strong>
              <span class="text-secondary text-sm"> What settled into the paper </span>
            </span>
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner>
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
</template>

navigation-menu/mega Vue React

navigation-menu/mega.vue

<script setup lang="ts">
import { NavigationMenu } from "@bysages/vue";

const features = [
  { title: "Tokens", copy: "Palettes and tiers on one ramp" },
  { title: "Lighting", copy: "Elevation computed from the source" },
  { title: "Motion", copy: "Ink bleeds, puppets keep strings" },
  { title: "Density", copy: "Whitespace scales, type holds" },
];
</script>

<template>
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item value="platform">
        <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <div class="grid grid-cols-2 gap-2 p-4">
            <div v-for="feature in features" :key="feature.title" class="p-2">
              <strong class="mb-1 block text-sm">{{ feature.title }}</strong>
              <span class="text-sm text-secondary">{{ feature.copy }}</span>
            </div>
          </div>
        </NavigationMenu.Content>
      </NavigationMenu.Item>
      <NavigationMenu.Item value="docs">
        <NavigationMenu.Link href="#docs">Docs</NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
    <NavigationMenu.ViewportPositioner>
      <NavigationMenu.Viewport />
    </NavigationMenu.ViewportPositioner>
  </NavigationMenu.Root>
</template>

#属性

#Arrow

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Content

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Indicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemIndicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Item

属性	类型	默认值	描述
`disabled`	`boolean \| undefined`		是否禁用导航项
`value`	`string`		导航项的值

#Link

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#List

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`closeDelay`	`number`	`300`	菜单关闭前的延迟时间
`defaultValue`	`string`		导航菜单的默认值；适合不需要受控值的场景
`disableClickTrigger`	`boolean`		是否禁用点击触发器
`disableHoverTrigger`	`boolean`		是否禁用悬停触发器
`disablePointerLeaveClose`	`boolean`		是否禁用指针离开时关闭菜单
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; list: string; item: string; trigger: (value: string) => string; content: (value: string) => string; viewport: string; }>`		状态机中各元素的 id
`openDelay`	`number`	`200`	菜单打开前的延迟时间
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	导航菜单的排列方向
`translations`	`navigationMenu.IntlTranslations`		无障碍元素及其状态使用的本地化文案
`value`	`string`		导航菜单的受控值

#Trigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ViewportPositioner

属性	类型	默认值	描述
`align`	`"start" \| "center" \| "end"`		视口位置，写入 CSS 变量 `--viewport-x` 和 `--viewport-y`；`@defaultValue 'center'`

#Viewport

纯造型的部件——自身没有属性，沿用部件结构的共享样式。