Component

Material Design 3 menus tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Enabled tokens
TokenValue
Menu container colormd.comp.menu.container.color
#F3EDF7
Menu container shapemd.comp.menu.container.shape
4dp
Menu container shadow colormd.comp.menu.container.shadow-color
#000000
Menu container elevationmd.comp.menu.container.elevation
3dp
Container
Container tokens
TokenValue
Menu list item selected label text colormd.comp.menu.list-item.selected.label-text.color
#4A4458
Menu list item with leading icon - icon colormd.comp.menu.list-item.selected.with-leading-icon.leading-icon.color
#4A4458
Menu list item with trailing icon - icon colormd.comp.menu.list-item.selected.with-leading-icon.trailing-icon.color
#4A4458
Menu container surface tint layer colormd.comp.menu.container.surface-tint-layer.color
#6750A4
Menu list item container heightmd.comp.menu.list-item.container.height
48dp
Menu list item selected container colormd.comp.menu.list-item.selected.container.color
#E8DEF8
Label text
Label text tokens
TokenValue
Menu list item label text colormd.comp.menu.list-item.label-text.color
#1D1B20
Menu list item label text fontmd.comp.menu.list-item.label-text.font
Roboto
Menu list item label text line heightmd.comp.menu.list-item.label-text.line-height
20pt
Menu list item label text sizemd.comp.menu.list-item.label-text.size
14pt
Menu list item label text trackingmd.comp.menu.list-item.label-text.tracking
0.1pt
Menu list item label text weightmd.comp.menu.list-item.label-text.weight
500
Label text type stylemd.comp.menu.list-item.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Icon
Icon tokens
TokenValue
Menu icon colormd.comp.menu.cascading-menu-indicator.icon.color
#49454F
Menu icon sizemd.comp.menu.cascading-menu-indicator.icon.size
24dp
Leading icon
Leading icon tokens
TokenValue
Menu list item leading icon sizemd.comp.menu.list-item.with-leading-icon.leading-icon.size
24dp
Menu list item leading icon colormd.comp.menu.list-item.with-leading-icon.leading-icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Menu list item trailing icon sizemd.comp.menu.list-item.with-trailing-icon.trailing-icon.size
24dp
Menu list item trailing icon colormd.comp.menu.list-item.with-trailing-icon.trailing-icon.color
#49454F
Divider
Divider tokens
TokenValue
Menu divider colormd.comp.menu.divider.color
#E7E0EC
Menu divider heightmd.comp.menu.divider.height
1dp
Disabled
Label text
Label text tokens
TokenValue
Menu list item disabled label text colormd.comp.menu.list-item.disabled.label-text.color
#1D1B20
Menu list item disabled label text opacitymd.comp.menu.list-item.disabled.label-text.opacity
38%
Leading icon
Leading icon tokens
TokenValue
Menu list item disabled leading icon colormd.comp.menu.list-item.with-leading-icon.disabled.leading-icon.color
#1D1B20
Menu list item disabled leading icon opacitymd.comp.menu.list-item.with-leading-icon.disabled.leading-icon.opacity
38%
Trailing icon
Trailing icon tokens
TokenValue
Menu list item disabled trailing icon colormd.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.color
#1D1B20
Menu list item disabled trailing icon opacitymd.comp.menu.list-item.with-trailing-icon.disabled.trailing-icon.opacity
38%
Hover
Label text
Label text tokens
TokenValue
Menu list item hover label text colormd.comp.menu.list-item.hover.label-text.color
#1D1B20
Leading icon
Leading icon tokens
TokenValue
Menu list item hover leading icon colormd.comp.menu.list-item.with-leading-icon.hover.icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Menu list item hover trailing icon colormd.comp.menu.list-item.with-trailing-icon.hover.icon.color
#49454F
State layer
State layer tokens
TokenValue
Menu list item hover state layer colormd.comp.menu.list-item.hover.state-layer.color
#1D1B20
Menu list item hover state layer opacitymd.comp.menu.list-item.hover.state-layer.opacity
8%
Focus
Label text
Label text tokens
TokenValue
Menu list item focus label text colormd.comp.menu.list-item.focus.label-text.color
#1D1B20
Leading icon
Leading icon tokens
TokenValue
Menu list item focus leading icon colormd.comp.menu.list-item.with-leading-icon.focus.icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Menu list item focus trailing icon colormd.comp.menu.list-item.with-trailing-icon.focus.icon.color
#49454F
State layer
State layer tokens
TokenValue
Menu list item focus state layer colormd.comp.menu.list-item.focus.state-layer.color
#1D1B20
Menu list item focus state layer opacitymd.comp.menu.list-item.focus.state-layer.opacity
10%
Pressed
Label text
Label text tokens
TokenValue
Menu list item pressed label text colormd.comp.menu.list-item.pressed.label-text.color
#1D1B20
Leading icon
Leading icon tokens
TokenValue
Menu list item pressed leading icon colormd.comp.menu.list-item.with-leading-icon.pressed.icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Menu list item pressed trailing icon colormd.comp.menu.list-item.with-trailing-icon.pressed.icon.color
#49454F
State layer
State layer tokens
TokenValue
Menu list item pressed state layer colormd.comp.menu.list-item.pressed.state-layer.color
#1D1B20
Menu list item pressed state layer opacitymd.comp.menu.list-item.pressed.state-layer.opacity
10%
Focus indicator
Focus indicator tokens
TokenValue
Menu item focus indicator colormd.comp.menu.focus.indicator.color
#625B71
Menu item focus indicator thicknessmd.comp.menu.focus.indicator.thickness
3dp
Menu item focus indicator offsetmd.comp.menu.focus.indicator.outline.offset
-3dp