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.

Enabled
Enabled tokens
TokenValue
Menu standard container colormd.comp.menus.standard.container.color
#F7F2FA
Menu standard section label text colormd.comp.menus.standard.section-label-text.color
#49454F
Menu standard menu item container colormd.comp.menus.standard.menu-item.container.color
#F7F2FA
Menu standard menu item label text colormd.comp.menus.standard.menu-item.label-text.color
#1D1B20
Menu standard menu item supporting text colormd.comp.menus.standard.menu-item.supporting-text.color
#49454F
Menu standard container shadow colormd.comp.menus.standard.container.shadow-color
#000000
Menu standard menu item leading icon colormd.comp.menus.standard.menu-item.leading-icon.color
#49454F
Menu standard menu item trailing icon colormd.comp.menus.standard.menu-item.trailing-icon.color
#49454F
Menu standard menu item trailing supporting text colormd.comp.menus.standard.menu-item.trailing-supporting-text.color
#49454F
Menu standard icon button container colormd.comp.menus.standard.icon-button.container.color
#F7F2FA
Menu standard icon button icon colormd.comp.menus.standard.icon-button.icon.color
#49454F
Disabled
Disabled tokens
TokenValue
Menu standard menu item disabled label text colormd.comp.menus.standard.menu-item.disabled.label-text.color
#1D1B20
Menu standard menu item disabled label text opacitymd.comp.menus.standard.menu-item.disabled.label-text.opacity
38%
Menu standard menu item disabled supporting text colormd.comp.menus.standard.menu-item.disabled.supporting-text.color
#1D1B20
Menu standard menu item disabled supporting text opacitymd.comp.menus.standard.menu-item.disabled.supporting-text.opacity
38%
Menu standard menu item disabled trailing supporting text colormd.comp.menus.standard.menu-item.disabled.trailing-supporting-text.color
#1D1B20
Menu standard menu item disabled trailing supporting text opacitymd.comp.menus.standard.menu-item.disabled.trailing-supporting-text.opacity
38%
Menu standard menu item disabled leading icon colormd.comp.menus.standard.menu-item.disabled.leading-icon.color
#1D1B20
Menu standard menu item disabled leading icon opacitymd.comp.menus.standard.menu-item.disabled.leading-icon.opacity
38%
Menu standard menu item disabled trailing icon colormd.comp.menus.standard.menu-item.disabled.trailing-icon.color
#1D1B20
Menu standard menu item disabled trailing icon opacitymd.comp.menus.standard.menu-item.disabled.trailing-icon.opacity
38%
Menu standard disabled icon button icon colormd.comp.menus.standard.disabled.icon-button.icon.color
#1D1B20
Hovered
Hovered tokens
TokenValue
Menu standard menu item hovered state layer colormd.comp.menus.standard.menu-item.hovered.state-layer.color
#1D1B20
Menu standard menu item hovered state layer opacitymd.comp.menus.standard.menu-item.hovered.state-layer.opacity
8%
Menu standard menu item hovered label text colormd.comp.menus.standard.menu-item.hovered.label-text.color
#1D1B20
Menu standard menu item hovered leading icon colormd.comp.menus.standard.menu-item.hovered.leading-icon.color
#49454F
Menu standard menu item hovered trailing icon colormd.comp.menus.standard.menu-item.hovered.trailing-icon.color
#49454F
Menu standard icon button hovered state layer colormd.comp.menus.standard.icon-button.hovered.state-layer.color
#1D1B20
Focused
Focused tokens
TokenValue
Menu standard menu item focused state layer colormd.comp.menus.standard.menu-item.focused.state-layer.color
#1D1B20
Menu standard menu item focused state layer opacitymd.comp.menus.standard.menu-item.focused.state-layer.opacity
10%
Menu standard menu item focused label text colormd.comp.menus.standard.menu-item.focused.label-text.color
#1D1B20
Menu standard menu item focused leading icon colormd.comp.menus.standard.menu-item.focused.leading-icon.color
#49454F
Menu standard menu item focused trailing icon colormd.comp.menus.standard.menu-item.focused.trailing-icon.color
#49454F
Menu standard icon button focused state layer colormd.comp.menus.standard.icon-button.focused.state-layer.color
#1D1B20
Pressed
Pressed tokens
TokenValue
Menu standard menu item pressed state layer colormd.comp.menus.standard.menu-item.pressed.state-layer.color
#1D1B20
Menu standard menu item pressed state layer opacitymd.comp.menus.standard.menu-item.pressed.state-layer.opacity
10%
Menu standard menu item pressed label text colormd.comp.menus.standard.menu-item.pressed.label-text.color
#1D1B20
Menu standard menu item pressed leading icon colormd.comp.menus.standard.menu-item.pressed.leading-icon.color
#49454F
Menu standard menu item pressed trailing icon colormd.comp.menus.standard.menu-item.pressed.trailing-icon.color
#49454F
Menu standard icon button pressed state layer colormd.comp.menus.standard.icon-button.pressed.state-layer.color
#1D1B20
Enabled, Active
Enabled, Active tokens
TokenValue
Menu standard menu item active state layer colormd.comp.menus.standard.menu-item.active.state-layer.color
#1D1B20
Menu standard menu item active state layer opacitymd.comp.menus.standard.menu-item.active.state-layer.opacity
8%
Enabled, Selected
Enabled, Selected tokens
TokenValue
Menu standard menu item selected container colormd.comp.menus.standard.menu-item.selected.container.color
#FFD8E4
Menu standard menu item selected label text colormd.comp.menus.standard.menu-item.selected.label-text.color
#633B48
Menu standard menu item selected supporting text colormd.comp.menus.standard.menu-item.selected.supporting-text.color
#633B48
Menu standard menu item selected leading icon colormd.comp.menus.standard.menu-item.selected.leading-icon.color
#633B48
Menu standard menu item selected trailing icon colormd.comp.menus.standard.menu-item.selected.trailing-icon.color
#633B48
Menu standard menu item selected trailing supporting text colormd.comp.menus.standard.menu-item.selected.trailing-supporting-text.color
#633B48
Menu standard icon button selected container colormd.comp.menus.standard.icon-button.selected.container.color
#FFD8E4
Menu standard icon button selected icon colormd.comp.menus.standard.icon-button.selected.icon.color
#633B48
Disabled, Selected
Disabled, Selected tokens
TokenValue
Menu standard menu item selected disabled container colormd.comp.menus.standard.menu-item.selected.disabled.container.color
#FFD8E4
Menu standard menu item selected disabled container opacitymd.comp.menus.standard.menu-item.selected.disabled.container.opacity
38%
Menu standard menu item selected disabled label text colormd.comp.menus.standard.menu-item.selected.disabled.label-text.color
#633B48
Menu standard menu item selected disabled label text opacitymd.comp.menus.standard.menu-item.selected.disabled.label-text.opacity
38%
Menu standard menu item selected disabled leading icon colormd.comp.menus.standard.menu-item.selected.disabled.leading-icon.color
#633B48
Menu standard menu item selected disabled leading icon opacitymd.comp.menus.standard.menu-item.selected.disabled.leading-icon.opacity
38%
Menu standard menu item selected disabled trailing icon colormd.comp.menus.standard.menu-item.selected.disabled.trailing-icon.color
#633B48
Menu standard menu item selected disabled trailing icon opacitymd.comp.menus.standard.menu-item.selected.disabled.trailing-icon.opacity
38%
Menu standard menu item selected disabled trailing supporting text colormd.comp.menus.standard.menu-item.selected.disabled.trailing-supporting-text.color
#633B48
Menu standard icon button disabled icon colormd.comp.menus.standard.icon-button.disabled.icon.color
#633B48
Hovered, Selected
Hovered, Selected tokens
TokenValue
Menu standard menu item selected hovered state layer colormd.comp.menus.standard.menu-item.selected.hovered.state-layer.color
#633B48
Menu standard menu item selected hovered state layer opacitymd.comp.menus.standard.menu-item.selected.hovered.state-layer.opacity
8%
Menu standard menu item selected hovered label text colormd.comp.menus.standard.menu-item.selected.hovered.label-text.color
#633B48
Menu standard menu item selected hovered supporting text colormd.comp.menus.standard.menu-item.selected.hovered.supporting-text.color
#633B48
Menu standard menu item selected hovered trailing supporting text colormd.comp.menus.standard.menu-item.selected.hovered.trailing-supporting-text.color
#633B48
Menu standard menu item selected hovered leading icon colormd.comp.menus.standard.menu-item.selected.hovered.leading-icon.color
#633B48
Menu standard menu item selected hovered trailing icon colormd.comp.menus.standard.menu-item.selected.hovered.trailing-icon.color
#633B48
Menu standard icon button selected hovered state layer colormd.comp.menus.standard.icon-button.selected.hovered.state-layer.color
#633B48
Focused, Selected
Focused, Selected tokens
TokenValue
Menu standard menu item selected focused state layer colormd.comp.menus.standard.menu-item.selected.focused.state-layer.color
#633B48
Menu standard menu item selected focused state layer opacitymd.comp.menus.standard.menu-item.selected.focused.state-layer.opacity
10%
Menu standard menu item selected focused label text colormd.comp.menus.standard.menu-item.selected.focused.label-text.color
#633B48
Menu standard menu item selected focused supporting text colormd.comp.menus.standard.menu-item.selected.focused.supporting-text.color
#633B48
Menu standard menu item selected focused trailing supporting text colormd.comp.menus.standard.menu-item.selected.focused.trailing-supporting-text.color
#633B48
Menu standard menu item selected focused leading icon colormd.comp.menus.standard.menu-item.selected.focused.leading-icon.color
#633B48
Menu standard menu item selected focused trailing icon colormd.comp.menus.standard.menu-item.selected.focused.trailing-icon.color
#633B48
Menu standard icon button selected focused state layer colormd.comp.menus.standard.icon-button.selected.focused.state-layer.color
#633B48
Pressed, Selected
Pressed, Selected tokens
TokenValue
Menu standard menu item selected pressed state layer colormd.comp.menus.standard.menu-item.selected.pressed.state-layer.color
#633B48
Menu standard menu item selected pressed state layer opacitymd.comp.menus.standard.menu-item.selected.pressed.state-layer.opacity
10%
Menu standard menu item selected pressed label text colormd.comp.menus.standard.menu-item.selected.pressed.label-text.color
#633B48
Menu standard menu item selected pressed supporting text colormd.comp.menus.standard.menu-item.selected.pressed.supporting-text.color
#633B48
Menu standard menu item selected pressed trailing supporting text colormd.comp.menus.standard.menu-item.selected.pressed.trailing-supporting-text.color
#633B48
Menu standard menu item selected pressed leading icon colormd.comp.menus.standard.menu-item.selected.pressed.leading-icon.color
#633B48
Menu standard menu item selected pressed trailing icon colormd.comp.menus.standard.menu-item.selected.pressed.trailing-icon.color
#633B48
Menu standard icon button selected pressed state layer colormd.comp.menus.standard.icon-button.selected.pressed.state-layer.color
#633B48