用途：Sidebar 是沿屏幕左或右边缘持久显示的垂直导航面板，用于提供对应用主要部分与功能的访问，常见于仪表盘、管理面板、文档站与复杂 Web 应用。它相比水平导航能容纳嵌套、可折叠的深层级，同时保持导航可见且不遮挡内容。
适用场景：管理仪表盘的多功能区与设置；文档站章节导航；邮件客户端、项目管理与 SaaS 应用；文件管理文件夹树；分析平台的报告分类。
应避免：营销或宣传站点（更常用水平导航）；导航项少于 5-6 个的站点；仅移动端应用（平台惯例是底部标签栏）；全屏内容体验（阅读类、媒体播放器）。
使用方式：先确认模式匹配问题与约束，再参考 references/pattern.md 的组成与示例选择最小可行变体，先应用无障碍、性能与交互护栏，再做视觉打磨，并用测试指导验证键盘、屏幕阅读器、响应式与失败场景。
无障碍要点：使用 <nav> 或 <aside> 加 aria-label 作为侧边栏 landmark；用 aria-current="page" 标记当前页；可折叠切换用 aria-expanded；支持 Tab 切换、Enter 激活、Escape 折叠；内容溢出时侧边栏可独立滚动。不要仅支持鼠标或触摸，不要用非语义 div 做链接或切换，不要移除焦点指示。
性能目标：完整侧边栏初始渲染 <100ms；折叠动画 200ms 达 60fps；分区切换响应 <50ms；独立滚动 60fps；组件与样式包体 <5KB。可用 CSS Grid 布局避免 JS 定位。
常见错误：中等屏幕无折叠选项；深层嵌套项不持久化展开状态；无当前项高亮。
限制：资料未提供具体安装命令、依赖或收费信息。完整实现细节、示例与测试说明见 references/pattern.md 及 https://uxpatterns.dev/patterns/navigation/sidebar。