侧栏是什么？
侧栏是产品的纵向地图。给出宽度、当前项处理和平板折叠。
变体
点击属性即可在预览中高亮。
- 固定不动、不可收起的侧边栏。
- 可收缩为图标或完全隐藏的侧边栏。
- 面的横向尺寸（模态最大宽度、侧边栏宽度）。
- 当前激活的导航项，用明显背景或强调色标记。
- 为导航项作标记或装饰的小图标。
状态
点击属性即可在预览中高亮。
- 输入或报错前字段的默认有效状态。
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 品牌区
- 02 导航项
- 03 当前项
什么时候用
- 有 5–12 个板块的仪表盘与后台
- 导航需要常驻可见的产品
- 带可折叠工作区栏的应用外壳
什么时候别用
- 以内容为主的营销页——改用导航栏
- 目的地少于 4 个
- 小屏没有抽屉方案
Create a product sidebar.
LAYOUT
- 180px fixed left rail
STYLE
- current item with 2px accent bar
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui