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 vibrant container colormd.comp.menus.vibrant.container.color
#FFD8E4
Menu vibrant menu item colormd.comp.menus.vibrant.menu-item.color
#FFD8E4
Menu vibrant section label text colormd.comp.menus.vibrant.section-label-text.color
#633B48
Menu vibrant menu item label text colormd.comp.menus.vibrant.menu-item.label-text.color
#633B48
Menu vibrant menu item supporting text colormd.comp.menus.vibrant.menu-item.supporting-text.color
#633B48
Menu vibrant menu item trailing supporting text colormd.comp.menus.vibrant.menu-item.trailing-supporting-text.color
#633B48
Menu vibrant menu item leading icon colormd.comp.menus.vibrant.menu-item.leading-icon.color
#633B48
Menu vibrant menu item trailing icon colormd.comp.menus.vibrant.menu-item.trailing-icon.color
#633B48
Menu vibrant icon button container colormd.comp.menus.vibrant.icon-button.container.color
#FFD8E4
Menu vibrant icon button icon colormd.comp.menus.vibrant.icon-button.icon.color
#633B48
Disabled
Disabled tokens
TokenValue
Menu vibrant menu item disabled label text colormd.comp.menus.vibrant.menu-item.disabled.label-text.color
#633B48
Menu vibrant menu item disabled label text opacitymd.comp.menus.vibrant.menu-item.disabled.label-text.opacity
38%
Menu vibrant menu item disabled supporting text colormd.comp.menus.vibrant.menu-item.disabled.supporting-text.color
#633B48
Menu vibrant menu item disabled supporting text opacitymd.comp.menus.vibrant.menu-item.disabled.supporting-text.opacity
38%
Menu vibrant menu item disabled trailing supporting text colormd.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.color
#633B48
Menu vibrant menu item disabled trailing supporting text opacitymd.comp.menus.vibrant.menu-item.disabled.trailing-supporting-text.opacity
38%
Menu vibrant menu item disabled leading icon colormd.comp.menus.vibrant.menu-item.disabled.leading-icon.color
#633B48
Menu vibrant menu item disabled leading icon opacitymd.comp.menus.vibrant.menu-item.disabled.leading-icon.opacity
38%
Menu vibrant menu item disabled trailing icon colormd.comp.menus.vibrant.menu-item.disabled.trailing-icon.color
#633B48
Menu vibrant menu item disabled trailing icon opacitymd.comp.menus.vibrant.menu-item.disabled.trailing-icon.opacity
38%
Menu vibrant icon button disabled icon colormd.comp.menus.vibrant.icon-button.disabled.icon.color
#633B48
Hovered
Hovered tokens
TokenValue
Menu vibrant menu item hovered state layer colormd.comp.menus.vibrant.menu-item.hovered.state-layer.color
#633B48
Menu vibrant menu item hovered state layer opacitymd.comp.menus.vibrant.menu-item.hovered.state-layer.opacity
8%
Menu vibrant menu item hovered label text colormd.comp.menus.vibrant.menu-item.hovered.label-text.color
#633B48
Menu vibrant menu item hovered supporting text colormd.comp.menus.vibrant.menu-item.hovered.supporting-text.color
#633B48
Menu vibrant menu item hovered trailing supporting text colormd.comp.menus.vibrant.menu-item.hovered.trailing-supporting-text.color
#633B48
Menu vibrant menu item hovered leading icon colormd.comp.menus.vibrant.menu-item.hovered.leading-icon.color
#7D5260
Menu vibrant menu item hovered trailing icon colormd.comp.menus.vibrant.menu-item.hovered.trailing-icon.color
#7D5260
Menu vibrant icon button hovered state layer colormd.comp.menus.vibrant.icon-button.hovered.state-layer.color
#633B48
Focused
Focused tokens
TokenValue
Menu vibrant menu item focused state layer colormd.comp.menus.vibrant.menu-item.focused.state-layer.color
#633B48
Menu vibrant menu item focused state layer opacitymd.comp.menus.vibrant.menu-item.focused.state-layer.opacity
10%
Menu vibrant menu item focused label text colormd.comp.menus.vibrant.menu-item.focused.label-text.color
#633B48
Menu vibrant menu item focused supporting text colormd.comp.menus.vibrant.menu-item.focused.supporting-text.color
#633B48
Menu vibrant menu item focused trailing supporting text colormd.comp.menus.vibrant.menu-item.focused.trailing-supporting-text.color
#633B48
Menu vibrant menu item focused leading icon colormd.comp.menus.vibrant.menu-item.focused.leading-icon.color
#7D5260
Menu vibrant menu item focused trailing icon colormd.comp.menus.vibrant.menu-item.focused.trailing-icon.color
#7D5260
Menu vibrant icon button focused state layer colormd.comp.menus.vibrant.icon-button.focused.state-layer.color
#633B48
Pressed
Pressed tokens
TokenValue
Menu vibrant menu item pressed state layer colormd.comp.menus.vibrant.menu-item.pressed.state-layer.color
#633B48
Menu vibrant menu item pressed state layer opacitymd.comp.menus.vibrant.menu-item.pressed.state-layer.opacity
10%
Menu vibrant menu item pressed label text colormd.comp.menus.vibrant.menu-item.pressed.label-text.color
#633B48
Menu vibrant menu item pressed supporting text colormd.comp.menus.vibrant.menu-item.pressed.supporting-text.color
#633B48
Menu vibrant menu item pressed trailing supporting text colormd.comp.menus.vibrant.menu-item.pressed.trailing-supporting-text.color
#633B48
Menu vibrant menu item pressed leading icon colormd.comp.menus.vibrant.menu-item.pressed.leading-icon.color
#7D5260
Menu vibrant menu item pressed trailing icon colormd.comp.menus.vibrant.menu-item.pressed.trailing-icon.color
#7D5260
Menu vibrant icon button pressed state layer colormd.comp.menus.vibrant.icon-button.pressed.state-layer.color
#633B48
Enabled, Active
Enabled, Active tokens
TokenValue
Menu vibrant menu item active state layer colormd.comp.menus.vibrant.menu-item.active.state-layer.color
#633B48
Menu vibrant menu item active state layer opacitymd.comp.menus.vibrant.menu-item.active.state-layer.opacity
8%
Enabled, Selected
Enabled, Selected tokens
TokenValue
Menu vibrant menu item selected container colormd.comp.menus.vibrant.menu-item.selected.container.color
#7D5260
Menu vibrant menu item selected supporting text colormd.comp.menus.vibrant.menu-item.selected.supporting-text.color
#FFFFFF
Menu vibrant menu item selected trailing supporting text colormd.comp.menus.vibrant.menu-item.selected.trailing-supporting-text.color
#FFFFFF
Menu vibrant menu item selected label text colormd.comp.menus.vibrant.menu-item.selected.label-text.color
#FFFFFF
Menu vibrant menu item selected leading icon colormd.comp.menus.vibrant.menu-item.selected.leading-icon.color
#FFFFFF
Menu vibrant menu item selected trailing icon colormd.comp.menus.vibrant.menu-item.selected.trailing-icon.color
#FFFFFF
Menu vibrant icon button selected container colormd.comp.menus.vibrant.icon-button.selected.container.color
#7D5260
Menu vibrant icon button selected icon colormd.comp.menus.vibrant.icon-button.selected.icon.color
#FFFFFF
Disabled, Selected
Disabled, Selected tokens
TokenValue
Menu vibrant menu item selected disabled label text opacitymd.comp.menus.vibrant.menu-item.selected.disabled.label-text.opacity
38%
Menu vibrant menu item selected disabled supporting text opacitymd.comp.menus.vibrant.menu-item.selected.disabled.supporting-text.opacity
38%
Menu vibrant menu item selected disabled trailing supporting text opacitymd.comp.menus.vibrant.menu-item.selected.disabled.trailing-supporting-text.opacity
38%
Menu vibrant menu item selected disabled leading icon opacitymd.comp.menus.vibrant.menu-item.selected.disabled.leading-icon.opacity
38%
Menu vibrant menu item selected disabled trailing icon opacitymd.comp.menus.vibrant.menu-item.selected.disabled.trailing-icon.opacity
38%
Menu vibrant icon button selected disabled icon colormd.comp.menus.vibrant.icon-button.selected.disabled.icon.color
#FFFFFF
Hovered, Selected
Hovered, Selected tokens
TokenValue
Menu vibrant menu item selected hovered state layer colormd.comp.menus.vibrant.menu-item.selected.hovered.state-layer.color
#FFFFFF
Menu vibrant menu item selected hovered state layer opacitymd.comp.menus.vibrant.menu-item.selected.hovered.state-layer.opacity
8%
Menu vibrant menu item selected hovered label text colormd.comp.menus.vibrant.menu-item.selected.hovered.label-text.color
#FFFFFF
Focused, Selected
Focused, Selected tokens
TokenValue
Menu vibrant menu item selected focused state layer colormd.comp.menus.vibrant.menu-item.selected.focused.state-layer.color
#FFFFFF
Menu vibrant menu item selected focused state layer opacitymd.comp.menus.vibrant.menu-item.selected.focused.state-layer.opacity
10%
Menu vibrant menu item selected focused label text colormd.comp.menus.vibrant.menu-item.selected.focused.label-text.color
#FFFFFF
Pressed, Selected
Pressed, Selected tokens
TokenValue
Menu vibrant menu item selected pressed state layer colormd.comp.menus.vibrant.menu-item.selected.pressed.state-layer.color
#FFFFFF
Menu vibrant menu item selected pressed state layer opacitymd.comp.menus.vibrant.menu-item.selected.pressed.state-layer.opacity
10%
Menu vibrant menu item selected pressed label text colormd.comp.menus.vibrant.menu-item.selected.pressed.label-text.color
#FFFFFF