- Modernize the Menu component to the latest specs. Reuse the newly introduced theme tokens (typography, motion, shape etc).
See https://m3.material.io/components/menus for the full picture.
- Extract component specific tokens for easier maintenance.
- Get inspired from TextInput/TextField, Switch, Checkbox, FAB components which have gone through modernization.
Current State
Menu
MD3 spec: Menus
Specs link: https://m3.material.io/components/menus/specs
Color tokens
Spacing / sizing
Shape
Behavior
Notes
- The current component implements the baseline menu variant only. The M3 Expressive vertical menu is a largely new feature surface (new shapes, selection states, vibrant color scheme, submenu motion, grouped layout) that requires significant additions.
- The
borderRadius: theme.roundness bug is a significant visual regression vs spec – the container should be visibly rounded.
See https://m3.material.io/components/menus for the full picture.
Current State
Menu
MD3 spec: Menus
Specs link: https://m3.material.io/components/menus/specs
Color tokens
theme.colors.elevation[level2]which resolves tosurfaceContainerLow✅ (standard color scheme)Menu.Itemlabel text:onSurface✅Menu.Itemleading/trailing icon:onSurfaceVariant✅Menu.Itemdisabled opacity:stateOpacity.disabled(0.38) ✅tertiaryContainerbg /onTertiaryContainertext+icon for selected menu itemstertiaryContainercontainer /onTertiaryContainericons+labels /tertiaryselected bg /onTertiaryselected text+iconSpacing / sizing
paddingVertical: 8✅paddingHorizontal: 12✅Menu.Itemlabel text usesbodyLarge; spec requireslabelLargeMenu.Itemhas no supporting text slot (bodySmall); spec anatomy includes optional supporting text per itemMenu.Itemhas no trailing supporting text slot (labelLarge); spec anatomy includes optional trailing text per itemShape
borderRadius: theme.roundness= 4dp; speccorner.large=4 * roundness= 16dp ❌corner.mediumtop corners; not implementedcorner.mediumbottom corners; not implementedcorner.medium; not implementedBehavior
Easing.bezier(0.4, 0, 0.2, 1)from old M3 motion guidelines; M3 Expressive uses spring-based motion)Dividerwhich is not the spec-aligned grouping mechanism for vertical menusNotes
borderRadius: theme.roundnessbug is a significant visual regression vs spec – the container should be visibly rounded.