@xwink/ui

NavMenu

导航下拉菜单:图标触发器 + 链接列表,供窄屏收纳横排放不下的导航。弹层行为(焦点、aria、键盘、dismiss)交给 Reka UI DropdownMenu,本组件只做样式层。

注意:弹层 portal 到 body,不继承宿主容器的显隐。宿主 class 会同时落到触发器与弹层——「只在窄屏出现」这类断点约束才会在弹层上同样生效(窗口变宽时菜单不会还开着)。

基础

图标触发器 + 链接列表

分组

NavMenuItemgroup 即按组渲染,组间自动分隔。分组走 Reka 的 DropdownMenuGroup + DropdownMenuLabel,组标题与它标注的项有 aria 关联。不带 group 的项归入首个匿名组、不渲染标题,所以单组导航的既有调用不用改。同一页出现多个菜单时用 icon 区分触发器(缺省 ph:list)。

按组渲染 + 自定义触发图标

API

Props

名称类型默认值说明
items 必填 NavMenuItem[]
labelstring | undefined触发器的无障碍名称,缺省用库级默认文案
iconstring | undefined触发器图标,缺省是汉堡列表。同一页出现多个菜单时靠它区分用途
size"mini" | "small" | "medium" | "large" | "super" | undefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size