NavMenu
导航下拉菜单:图标触发器 + 链接列表,供窄屏收纳横排放不下的导航。弹层行为(焦点、aria、键盘、dismiss)交给 Reka UI DropdownMenu,本组件只做样式层。
注意:弹层 portal 到 body,不继承宿主容器的显隐。宿主 class 会同时落到触发器与弹层——「只在窄屏出现」这类断点约束才会在弹层上同样生效(窗口变宽时菜单不会还开着)。
基础
图标触发器 + 链接列表
分组
给 NavMenuItem 加 group 即按组渲染,组间自动分隔。分组走 Reka 的 DropdownMenuGroup + DropdownMenuLabel,组标题与它标注的项有 aria 关联。不带 group 的项归入首个匿名组、不渲染标题,所以单组导航的既有调用不用改。同一页出现多个菜单时用 icon 区分触发器(缺省 ph:list)。
按组渲染 + 自定义触发图标
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items 必填 | NavMenuItem[] | — | — |
label | string | undefined | — | 触发器的无障碍名称,缺省用库级默认文案 |
icon | string | undefined | — | 触发器图标,缺省是汉堡列表。同一页出现多个菜单时靠它区分用途 |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | — | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |