侧边栏
Sidebar
别名:左侧菜单侧栏左边菜单导航侧栏固定菜单网页左边固定菜单侧边导航
这是什么
固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
交互实验室
试一试，再决定怎么用切换侧栏入口，比较展开和收起后的信息密度。
正在加载实验室…
使用时关注什么
- 01当前页面有明确标记，收起后保留可理解名称。
- 02窄屏要避免侧栏长期占用内容宽度。
✓ 适用场景
- 层级较多的后台、文档站、管理面板
- 导航项需要常驻可见、随时切换
- 桌面端为主的宽屏布局
✕ 不适用场景
- 移动端（改为抽屉或底部导航）
- 层级极少的简单官网（顶部导航更轻）
- 内容需要最大化宽度（如阅读、编辑器写作模式）
常见形式
固定宽
Fixed
常驻 240px 左右，最经典
可折叠
Collapsible
收成图标条，兼顾密度与空间
浮动
Floating
与内容区脱开，卡片式悬浮（Linear 风格）
实现要点
position: stickyflexwidthoverflow-y: auto布局用 flex：侧栏固定宽 + 内容区 flex-1；侧栏内部 overflow-y-auto，sticky 顶部。 折叠态用 width 过渡（240px ↔ 64px），图标居中，文字 opacity 隐藏。 移动端断点下转为 fixed 抽屉 + 遮罩。当前项用 accent 色块或左侧竖条标识。
平台 API
<aside><nav>横向对比
查看完整对比 →相关概念
固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件替代方案从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件相似概念用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件相似概念用"首页 / 分类 / 子类 / 当前页"的层级路径表示用户在信息架构中所处的位置： 每个上级都可点击跳回，末项为当前页不可点。这是防止用户迷路成本最低的手段， 命名源自童话中沿途撒下用来标记归路的面包屑。常置于页面标题上方。
组件相似概念