COMPONENT 02 · Navigation & Orientation
侧边导航
Sidebar Navigation
也叫SidebarSide NavigationSidenav侧栏菜单
沿页面侧边常驻的纵向导航，适合层级较多的产品。
Persistent vertical navigation for products with many sections or nested destinations.
ANATOMY & USAGE
结构与使用建议
组成部分
- 侧栏容器
- 分组标题
- 导航项
适合使用
- 桌面端信息架构较深且空间充足时。
不建议使用
- 小屏幕会被常驻侧栏挤压时。
键盘与无障碍
- 导航项可键盘聚焦，当前项使用 aria-current，折叠组同步 aria-expanded。
DESCRIBE IT TO AI
这样告诉编程助手
实现侧边导航（Sidebar Navigation）：沿页面侧边常驻的纵向导航，适合层级较多的产品。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<nav class="demo row" aria-label="侧边导航">
<strong>Acme</strong>
<a href="#overview" aria-current="page">概览</a>
<a href="#examples">示例</a>
</nav>