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

Typography
Typography tokens
TokenValue
Menu item label text fontmd.comp.menus.menu-item.label-text.font
Roboto
Menu item label text line heightmd.comp.menus.menu-item.label-text.line-height
20pt
Menu item label text sizemd.comp.menus.menu-item.label-text.size
14pt
Menu item label text trackingmd.comp.menus.menu-item.label-text.tracking
0.1pt
Menu item label text weightmd.comp.menus.menu-item.label-text.weight
500
Menu item supporting text fontmd.comp.menus.menu-item.supporting-text.font
Roboto
Menu item supporting text line heightmd.comp.menus.menu-item.supporting-text.line-height
16pt
Menu item supporting text sizemd.comp.menus.menu-item.supporting-text.size
12pt
Menu item supporting text trackingmd.comp.menus.menu-item.supporting-text.tracking
0.4pt
Menu item supporting text weightmd.comp.menus.menu-item.supporting-text.weight
400
Menu item trailing supporting text fontmd.comp.menus.menu-item.trailing-supporting-text.font
Roboto
Menu item trailing supporting text line heightmd.comp.menus.menu-item.trailing-supporting-text.line-height
20pt
Menu item trailing supporting text sizemd.comp.menus.menu-item.trailing-supporting-text.size
14pt
Menu item trailing supporting text trackingmd.comp.menus.menu-item.trailing-supporting-text.tracking
0.1pt
Menu item trailing supporting text weightmd.comp.menus.menu-item.trailing-supporting-text.weight
500
Shape
Default
Default tokens
TokenValue
Menu container shapemd.comp.menus.container.shape
16dp
Menu active container shapemd.comp.menus.active.container.shape
16dp
Menu inactive container shapemd.comp.menus.inactive.container.shape
8dp
Menu group shapemd.comp.menus.group.shape
8dp
Menu item shapemd.comp.menus.menu-item.shape
4dp
Menu item first child shapemd.comp.menus.menu-item.first-child.shape
12dp
Menu item first child inner corner corner sizemd.comp.menus.menu-item.first-child.inner-corner.corner-size
4dp
Menu item last child shapemd.comp.menus.menu-item.last-child.shape
12dp
Menu item last child inner corner corner sizemd.comp.menus.menu-item.last-child.inner-corner.corner-size
4dp
Selected
Selected tokens
TokenValue
Menu item selected shapemd.comp.menus.menu-item.selected.shape
12dp
Horizontal, Default
Horizontal, Default tokens
TokenValue
Menu horizontal container shapemd.comp.menus.horizontal.container.shape
Full
Menu horizontal menu item hovered shapemd.comp.menus.horizontal.menu-item.hovered.shape
12dp
Menu horizontal menu item focused shapemd.comp.menus.horizontal.menu-item.focused.shape
12dp
Menu horizontal menu item pressed shapemd.comp.menus.horizontal.menu-item.pressed.shape
12dp
Horizontal, Selected
Horizontal, Selected tokens
TokenValue
Menu horizontal menu item selected hovered shapemd.comp.menus.horizontal.menu-item.selected.hovered.shape
Full
Menu horizontal menu item selected focused shapemd.comp.menus.horizontal.menu-item.selected.focused.shape
Full
Menu horizontal menu item selected pressed shapemd.comp.menus.horizontal.menu-item.selected.pressed.shape
Full
Horizontal icon-only, selected
Horizontal icon-only, selected tokens
TokenValue
Menu horizontal icon only menu item selected shapemd.comp.menus.horizontal.icon-only.menu-item.selected.shape
Full
Layout
Default
Default tokens
TokenValue
Menu gapmd.comp.menus.gap
2dp
Menu group paddingmd.comp.menus.group.padding
2dp
Menu container elevationmd.comp.menus.container.elevation
3dp
Menu item heightmd.comp.menus.menu-item.height
44dp
Menu item top spacemd.comp.menus.menu-item.top-space
8dp
Menu item bottom spacemd.comp.menus.menu-item.bottom-space
8dp
Menu item leading spacemd.comp.menus.menu-item.leading-space
16dp
Menu item trailing spacemd.comp.menus.menu-item.trailing-space
16dp
Menu item between spacemd.comp.menus.menu-item.between-space
12dp
Menu item leading icon sizemd.comp.menus.menu-item.leading-icon.size
20dp
Menu item trailing icon sizemd.comp.menus.menu-item.trailing-icon.size
20dp
Horizontal
Horizontal tokens
TokenValue
Menu horizontal container top spacemd.comp.menus.horizontal.container.top-space
8dp
Menu horizontal container bottom spacemd.comp.menus.horizontal.container.bottom-space
8dp
Menu horizontal menu item leading spacemd.comp.menus.horizontal.menu-item.leading-space
12dp
Menu horizontal menu item trailing spacemd.comp.menus.horizontal.menu-item.trailing-space
12dp
Menu horizontal menu item between spacemd.comp.menus.horizontal.menu-item.between-space
12dp
Menu horizontal menu item top spacemd.comp.menus.horizontal.menu-item.top-space
6dp
Menu horizontal menu item bottom spacemd.comp.menus.horizontal.menu-item.bottom-space
6dp
Horizontal icon-only
Horizontal icon-only tokens
TokenValue
Menu horizontal icon only menu item leading spacemd.comp.menus.horizontal.icon-only.menu-item.leading-space
16dp
Menu horizontal icon only menu item trailing spacemd.comp.menus.horizontal.icon-only.menu-item.trailing-space
16dp
Menu horizontal icon only menu item top spacemd.comp.menus.horizontal.icon-only.menu-item.top-space
16dp
Menu horizontal icon only menu item bottom spacemd.comp.menus.horizontal.icon-only.menu-item.bottom-space
16dp
Menu horizontal icon only gapmd.comp.menus.horizontal.icon-only.gap
4dp
Focus ring
Focus ring tokens
TokenValue
Menu item focus indicator colormd.comp.menus.menu-item.focus.indicator.color
#625B71
Menu item focus indicator thicknessmd.comp.menus.menu-item.focus.indicator.thickness
3dp
Menu item focus indicator outline offsetmd.comp.menus.menu-item.focus.indicator.outline.offset
-3dp