下拉菜单是什么？
下拉菜单展开一组操作。点名锚定方式、键盘路径，以及什么会关闭它。
变体
点击属性即可在预览中高亮。
- 触发器激活后浮出的选项列表。
- 在 Prompt 里写明这个类型。
- 在 Prompt 里写明这个类型。
- 打开菜单的触发器控件。
- 给具体值，不要只给感觉词。
- 为导航项作标记或装饰的小图标。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
状态
点击属性即可在预览中高亮。
- 在 Prompt 里写明这个状态。
- 菜单、下拉或对话框展开可见时的状态。
- 在 Prompt 里写明这个状态。
- 在 Prompt 里写明这个状态。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 触发器
- 02 菜单
- 03 菜单项
- 04 分隔线
- 05 快捷键提示
什么时候用
- 行与卡片的溢出菜单
- 顶栏的账户菜单
- 列表上方的排序与视图切换
什么时候别用
- 用户在为表单取值——改用下拉选择
- 菜单需要多级——改用抽屉或独立页面
- 只有两个选项——直接用两个按钮
Keep it one level deep — a flyout opening a second flyout is where dropdowns start losing the pointer.
Create a dropdown component.
STYLE
- trigger 36px with a 14px trailing chevron, menu 200px wide
- menu surface #FFFFFF, 12px radius, 1px #E5E5EA border, 8px shadow
- items 32px tall, 13px text, hover #F5F5F7, chevron rotates on open
- separators 1px #E5E5EA with 4px padding on both sides
STATES
- closed, open, item hover, selected with a check mark, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui