下拉菜单用于显示与下拉菜单所在区域相关的操作或内容的上下文子视图。
- 支持任何类型的内容: 下拉菜单可以在许多上下文中使用,如日期选择器、语言选择或其他产品功能。
- 操作菜单: 下拉菜单最常用的场景之一是为用户提供操作菜单,因此定义此布局很有用。
- 聚焦捕获: 一旦下拉菜单打开,焦点应仅适用于下拉菜单内的元素。当它关闭时,焦点应移动到下拉菜单触发器。
- 关闭操作: 下拉菜单内的某些操作应关闭它,或者应该有一个单独的关闭按钮。此外,当用户点击外部时关闭下拉菜单是一个好习惯。
- 键盘导航: 应该可以使用键盘导航到下拉菜单子元素,并使用 Esc 键关闭它。
- 动态位置: 下拉菜单内容应根据触发元素在屏幕上的当前位置显示,并始终对用户可见。
- 响应式: 下拉菜单内容应根据移动视口进行调整,因为它在桌面上可能占用大量空间。