术语图鉴/UI/UX 设计/侧边栏
←→切换Esc返回

侧边栏 Sidebar

你可能会说

左侧加个侧边栏,放分类导航和筛选器。

页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。

页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。主内容在中间。

也常被叫作Sidebar

生活类比

像书的侧边索引标签——不用翻到正文,看侧边就知道每章在哪。

🎮 动手试试

🏠 首页
📊 数据
⚙️ 设置
👤 用户
选择题选择一个你认为最合适的答案

关于「侧边栏」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在后台左侧做个侧边栏:支持多级树形菜单、当前项高亮、可折叠分组,宽度 260px 固定。

容易混淆?这样区分

侧边栏 Sidebar≠
导航栏 Navbar

侧边栏竖向排列在页面左右两侧,导航栏横向排列在页面顶部,两者是不同方向的导航容器。

什么时候用

需要常驻辅助导航

后台管理、文档站、博客等左侧需要一直显示目录或分类导航时,用侧边栏让用户随时定位当前位置和跳转。

和 AI 协作时

想让 AI 做侧边栏时,说「左侧 260px 侧边栏:树形分类导航、当前高亮、可折叠」,AI 会生成布局代码。

什么时候不用

移动端小屏场景

手机屏幕宽度有限,侧边栏会挤占内容空间,用底部导航栏或汉堡菜单抽屉替代更符合移动端体验。

与单页纯内容无关

只有一个页面的简单站点(如个人博客单页),侧边栏增加的复杂度远超其带来的导航收益。

组成结构 · Anatomy

1
核心概念Core

页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。主内容在中间。

2
实际表现In Practice

像书的侧边索引标签——不用翻到正文,看侧边就知道每章在哪。

3
与 AI 的关联AI Context

和 AI 沟通时提到「左边加个侧边栏放分类」,就是做 Sidebar 布局。

典型使用场景

后台侧边菜单
告诉 AI「左侧 260px 侧边栏,树形菜单支持展开收起子项,当前页高亮蓝色背景,小屏缩进抽屉」
想弄懂概念时
告诉 AI「用大白话给我解释什么是侧边栏,举个生活中的例子」

延伸阅读