导航
NavItem
侧边栏里的一行。
示例
default
说明
侧栏里的一行。
用 aria-current="page"，而不只是靠颜色：当前行必须让看不见“它更深一点”的读者也能认出来。在这套系统里它还由字重和一块填充底色承担，所以在黑白打印和低对比度下都还在。
对框架中立。asChild 是 Next 或 React Router 应用拿到客户端跳转的方式，而这个包不用引入它们中的任何一个。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| href必填 | string | — | |
| active | boolean | false | 标记当前路由。同时会设上 `aria-current="page"`。 |
| asChild | boolean | false | 把样式交给路由库自己的 `Link`，而不是用原生 `<a>`。 被替换的子元素会拿到这些类名和 `aria-current`，并成为这一行——所以这个模式下 `icon` 不会被渲染；请把它放进子元素里面。 |
| className | string | — | |
| icon | LucideIcon | 可选的前置图标（一个 lucide-react 组件，按 18px 渲染）。 |
同时接受 Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
无障碍
- aria-current="page"，而且不只靠颜色：当前行同时由字重和填充底色承担。