一、概述

菜单是在一个临时浮层上显示一组可供选择的选项组件

1. 设计要求

菜单（menus）设计的3个要求:

使用菜单可以以便于快速浏览（scannable）的方式展示选项内容。
应确保菜单易于打开、关闭和选择。
菜单可以由多种组件触发打开，例如图标按钮（icon button）或文本输入框（text field）等

2. 与 M2 的区别

颜色（Color）：采用了新的颜色映射规则，并支持动态色彩（Dynamic Color）系统。

类型（Types）：原本的下拉菜单（Dropdown menu）和外露式下拉菜单（Exposed dropdown menu），现在统一被称为菜单（Menu），因为它们之间的区别仅在于触发菜单浮层的元素不同。

菜单在 Material 3 中采用了全新的颜色映射体系（color mappings）

二、规格

1. 构成

菜单由以下部分组成：

菜单容器（Menu container）：承载所有菜单内容的外框，定义了背景、圆角、阴影等视觉特征。
列表项（List items）：菜单中的主要操作项或选项内容。
分隔线（Dividers，可选）：用于分组或分隔内容，使信息层次更清晰。

你可以查看对应的 列表项设计变量（list item design tokens） 和 分隔线设计变量（divider design tokens），以了解它们在设计系统中的具体视觉样式与参数定义。

①列表项（List item），②前置图标（List item leading icon），③后置图标（List item trailing icon）④后置文字（List item trailing text），⑤容器（Container），⑥分隔线（Divider）

2. 颜色

颜色值是通过设计变量（Design Token）来实现和管理的。在设计阶段，这意味着你所使用的颜色值应当对应到相应的设计变量，而不是直接使用固定的十六进制色值。在开发实现阶段，每一个颜色值实际上都是一个引用具体数值的设计变量，通过变量映射来确保跨平台、跨主题的一致性。这样做可以让设计与代码共享同一套色彩逻辑，在主题切换或动态配色时保持系统化与连贯性。