使用方法

NavMenu 是 role="menu" 的菜单。NavMenuItem 是其中一项，有 href 时是链接。NavDisclosure 负责触发按钮、定位和关闭：点击、悬停、点击外部和 Escape 都会关掉。ArrowDown 打开并聚焦第一项，ArrowUp 聚焦最后一项。菜单内部方向键移动，单字符会按前缀匹配。

顶栏和溢出列表已经包好了这组零件。需要自己做账号菜单时直接用它们。

挂在侧栏或顶栏标题上的菜单用 NavHeadingMenu 和 NavHeadingMenuItem。把它放进标题的 menu 插槽即可，关闭和打开后的焦点由标题负责。有地址的项是链接，没有地址的项是 menuitem。方向键移动，Enter 或 Space 激活当前项。

<script setup lang="ts">
import { NavDisclosure, NavMenu, NavMenuItem } from '@astryx-vue/core/NavMenu'
</script>

<template>
  <NavDisclosure label="账号">
    <template #trigger="{ isOpen, panelId }">
      <button type="button" :aria-controls="panelId" :aria-expanded="isOpen">
        账号
      </button>
    </template>
    <template #default="{ close, focusRequest }">
      <NavMenu label="账号" :focus-request="focusRequest" @close="close">
        <NavMenuItem href="/profile" label="个人资料" />
      </NavMenu>
    </template>
  </NavDisclosure>
</template>

最佳实践

指引	实践
推荐	触发按钮写上 aria-expanded 和 aria-controls，插槽已经把状态传出来了。
推荐	选中一项后默认关闭。需要留下菜单时给项设置 keepOpen。
避免	不要把菜单项单独放进抽屉。抽屉里把 isMenuItem 设成 false，避免菜单项脱离菜单。

示例

产品切换

Acme Platform

侧栏标题打开产品切换菜单，里面是 Dashboard、Analytics 和 Settings。