@xwink/ui

    NavMenu

    导航下拉菜单:图标触发器 + 链接列表,供窄屏收纳横排放不下的导航。列表浮层就是 ContextMenu 的下拉菜单(open-on-click,贴着触发器右对齐),每项是链接本身(item-as-child);焦点、aria、键盘与 dismiss 随它交给 Reka UI。

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

    基础

    图标触发器 + 链接列表

    分组

    给 NavMenuItem 加 group 即按组渲染,组间自动分隔。分组即菜单项的 group(与 ContextMenu 同一套),组标题与它标注的项有 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