Drawer / Sidebar Navigation
侧边导航(抽屉/侧栏)
Navigation that slides in from the left or stays pinned there — the primary nav for dashboards and complex apps.
WebDesktopTabletNavigationLeft sidebar / drawerComponent
大白话说明
侧边导航把多层菜单收在一列:顶部放产品名或账号,菜单按组排列,当前项高亮,可折叠成只剩图标的窄条给内容腾地方。移动端同结构变为抽屉,从左侧滑出、用完滑走。
什么时候用
菜单项超过 8 个、或有两级以上层级时——后台、文档站、设置中心都是它的主场。
什么时候不用
一级入口只有三五个时别用它(顶部标签或底部标签更直接);营销页也别上侧栏,会打断阅读。
细节与变体
- 折叠态只留图标时,每个图标必须有气泡提示补文字
- 菜单分组之间留白或分隔线,组名小字大写或灰色
- 移动端抽屉打开时,背景要遮罩且点遮罩能关
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Ant Design ↗ MIT · 免费(MIT)
The de-facto standard for admin interfaces in China — tables, forms, lists.
- Carbon Design System ↗ Apache-2.0 · 免费(Apache-2.0)
IBM's design system — a benchmark for token systems and data-dense interfaces.
- shadcn-admin ↗ MIT · 免费(MIT)
A complete admin dashboard built with shadcn/ui — dashboard, settings, chat pages included.