New menu designs for Material 3 Expressive: What has changed?
What's the story
Google is updating its Material 3 Expressive design language with new "vertical menus." The revamped menus feature fresh shapes, color styles, selection states, and improved submenu motion. Unlike the previous "baseline menu," which is still available for use, these new menus have rounded corners and don't have dividers or current selections spanning the full width of the container.
Design flexibility
Google introduces 'with gap' option for flexible layouts
Along with the new vertical menus, Google has also introduced a "with gap" option. This works in conjunction with the existing "with divider" feature to provide a more flexible layout on Android. The idea is to create distinct separations and bundle similar actions together. However, Google has provided guidelines for its use: avoid changing the size of the gap, limit gaps to one or two per menu, and don't use gaps in scrollable menus.
Color styles
Google recommends 'vibrant' menus for higher visual emphasis
Google has also updated the color styles for its menus. The new "vibrant" menu offers a much higher visual emphasis than the standard one, which is surface-based and has lower visual emphasis. However, Google advises that these vibrant menus should be used sparingly.
Interaction enhancement
New menus complement Google's split button
The new vertical menus also work well with Google's recently introduced split button. The Material 3 Expressive's shape morphing feature can be used to make the corners of a focused submenu more rounded while making those of an unfocused one less rounded. This gives a dynamic quality to menu interactions, further enhancing user experience.