---
url: /components/menus/overview.md
description: >-
  Menus display a list of choices on a temporary surface. Menus can open from a
  variety of components, including icon buttons and text fields.
---

# Menus

Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Menus](/assets/28de6038-mrolo9uj-menu.DINheCCI.webp)

* Use a **menu** to show a temporary set of actions. To show actions on screen at all times, use a **[toolbar](../toolbars/overview.md "Toolbars display frequently used actions relevant to the current page.")** instead
* Menus can open from many components, including [icon buttons](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap."), [split buttons](../split-button/overview.md "The split button opens a menu to give people more options related to an action."), and [text fields](../text-fields/overview.md "Text fields let users enter text into a UI.")
* **Context menus** provide actions for a specific element, like an image or highlighted text, and usually open with a secondary click

![1 vertical menu with vibrant colors opens from a split button, and 1 vertical menu with a submenu.](/assets/4ad65bca-mhkajj6i-01.D4PvVOtV.webp)

Vertical menus can include vibrant colors, gaps, dividers, and submenus to organize a list of choices

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/menu) | Available |
| Implementation | [Jetpack Compose: Expressive](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DropdownMenuGroup%28androidx.compose.material3.MenuGroupShapes,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1%29) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md) | Available |
| Implementation | Android Views (MDC-Android): Expressive | Unavailable |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/menu.md) | Available |
| Implementation | Web: Expressive | Unavailable |

## M3 Expressive update

**November 2025**

**Vertical menus** were introduced with new shapes, color styles, selection states, and refined submenu motion. Gaps can be used for a more flexible layout on Android. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

Variants:

* Added **vertical menus**, recommended for new designs
* [Baseline](https://m3.material.io/blog/building-with-m3-expressive "Baseline variants are the M3 component designs. They may not have the latest features introduced in M3 Expressive, like updated motion, shapes, type, and styles.") **menu** is still available 


Color styles: 

* Standard
* Vibrant

![A vertical menu using shape and vibrant color to show a selected state.](/assets/a018ef7a-mhk9jsmw-02.CsjOz1qP.webp)

Vibrant colors help selected menu items stand out

## Differences from M2

* **Color**: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* **Variants**: Dropdown menu and exposed dropdown menu are now both referred to as menu, since they differ only in the element which opens the menu surface

![Menu with gray color.](/assets/83860a7a-mi5n1krh-4.Cp7ogyg-.webp)

M2: Former menu colors don’t contrast with the background

![Menu with purple background and outline.](/assets/f0eaec21-mhlt7xid-04.BBk7N9oX.webp)

M3: Menus feature new color mappings and dynamic color