你可能会说
左侧加个侧边栏,放分类导航和筛选器。
页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。
页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。主内容在中间。
生活类比
像书的侧边索引标签——不用翻到正文,看侧边就知道每章在哪。
🎮 动手试试
关于「侧边栏」,以下哪个描述最准确?
你可以这样告诉 AI
帮我在后台左侧做个侧边栏:支持多级树形菜单、当前项高亮、可折叠分组,宽度 260px 固定。
侧边栏竖向排列在页面左右两侧,导航栏横向排列在页面顶部,两者是不同方向的导航容器。
需要常驻辅助导航
后台管理、文档站、博客等左侧需要一直显示目录或分类导航时,用侧边栏让用户随时定位当前位置和跳转。
和 AI 协作时
想让 AI 做侧边栏时,说「左侧 260px 侧边栏:树形分类导航、当前高亮、可折叠」,AI 会生成布局代码。
移动端小屏场景
手机屏幕宽度有限,侧边栏会挤占内容空间,用底部导航栏或汉堡菜单抽屉替代更符合移动端体验。
与单页纯内容无关
只有一个页面的简单站点(如个人博客单页),侧边栏增加的复杂度远超其带来的导航收益。
页面左侧或右侧的竖条区域,常放分类导航、目录、筛选器等辅助内容。主内容在中间。
像书的侧边索引标签——不用翻到正文,看侧边就知道每章在哪。
和 AI 沟通时提到「左边加个侧边栏放分类」,就是做 Sidebar 布局。