Material 3 Menus

Compare the Material 3 Baseline Menu spec with the new M3 Expressive Vertical Menu spec.

Default (M3 Expressive)

Vertical Menu (Default)

48px item height, 16px container radius, 20px icons, inset 12px rounded pill selection, and shape-morphing motion. Applied by default to all <md-menu> elements.

Open Default Menu

Home

home

Dashboard

dashboard

Analytics

analytics

Preferences

tune

M3 Baseline Spec

Baseline Menu (variant="baseline")

48px item height, 12px padding, 4px corner radius, label-large typography, and full-width edge-to-edge selection. Opt in via variant="baseline" or the boolean attribute baseline.

Open Baseline Menu

Profile

person

Settings

settings

Help & feedback

help

Sign out

logout

M3 Expressive (Vibrant)

Vibrant Vertical Menu

High-emphasis tertiary container style with bold tertiary selection state and matching contrast tokens.

Open Vibrant Menu

Create playlist

playlist_add

Favorites

favorite

Recently added

schedule

Clear history

delete

M3 Expressive Submenus

Cascading Submenu

Cascading submenus seamlessly inherit parent vertical variant, corner radius, and color styles.

Open Submenu

Cut

content_cut

Copy

content_copy

Share

share arrow_right

Email

mail

Copy link

link

Social

public

Delete

delete_outline

Slotted Content

Slotted Icons & Avatars

Demonstrates proper 20px spec containment for standard icons, slotted images/avatars, and SVG graphics.

Open Slotted Menu

Travis Reeder

Standard Icon

settings

SVG Graphic

Trailing Indicator

folder chevron_right