跳到主要内容

Nav 导航Nav · NavGroup · NavItem

纵向的导航列表，通常放在 AppShell 的侧栏里。当前项下面有一块中性色的指示块，切换时滑到新的一项。选中用中性色，不用强调色。

示例

分组、图标、徽标、二级项

点任意一项，指示块会滑过去。打开开关看折叠后的样子：只剩图标，分组标题收成一条细线，徽标缩成小圆点。

链接

导航到别的页面用 href（或路由库的 Link）；只是切换视图用 onClick，渲染成按钮。

API

Nav 属性

属性类型默认值说明
collapsedboolean—折叠：只显示图标。不传时跟随所在的 AppShell.Sidebar（收成图标窄条时自动折叠）。
aria-labelstring—导航的名字。页面上有多个导航时用来区分。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

NavGroup 属性

属性类型默认值说明
labelReactNode—分组标题；折叠时收成一条细线，但仍然是这组的无障碍名称。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

NavItem 属性

属性类型默认值说明
hrefstring—有 href 渲染成 <a>，否则是 <button>。
asElementType—自定义渲染的元素 / 组件，比如路由库的 Link。
currentbooleanfalse当前页：加 aria-current="page"，指示块滑到这一项。
iconReactNode—前面的图标。要支持折叠就必须给。
badgeReactNode—后面的徽标位（数量、状态点）；折叠时缩成一个小圆点。
subbooleanfalse二级项：缩进、矮一档。
labelstring—折叠时的 title / aria-label。children 是纯文字时可以不传。
disabledbooleanfalse禁用：不响应点击，链接去掉 href。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

无障碍

  • 根节点是 <nav>（navigation 地标），请给 aria-label。分组是 role="group"，用分组标题命名。
  • 当前项带 aria-current="page"，读屏会念出“当前页”。指示块只是装饰。
  • 每一项都是普通的链接或按钮，按 Tab 顺序逐个到达，Enter（按钮还有 Space）触发。这是导航而不是菜单，所以不用方向键。
  • 折叠后文字从视觉上隐藏，名字改由 aria-label 和 title 提供：children 不是纯文字时记得传 label。
  • 禁用项带 aria-disabled；只靠徽标颜色表达的信息要有文字（比如未读数）。