Material 3 Drop-down Menus in Jetpack Compose

Get started with Material 3 drop-down menus in Jetpack Compose to create user-friendly interfaces for selecting from a list of options.

Explore Drop-down Menu Styles

Learn to implement three Material 3 drop-down menu types for user interactions.

Basic Drop-down Menu

Displays a minimal menu with a few selectable items.

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
  

Use a Basic Drop-down Menu when you want to offer a few selectable options.

Examples:

• Select actions in a toolbar
• Choose options in a settings menu
• Pick a simple action in a form

---

Long Drop-down Menu

Displays a scrollable menu for a large number of options.

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    val menuItemData = List(100) { "Option ${it + 1}" }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
  

Use a Long Drop-down Menu when you want to display many scrollable options.

Examples:

• Select from a large list of categories
• Choose items in a product filter
• Pick options in a detailed menu

---

Detailed Drop-down Menu

Includes dividers and icons for grouped, visually distinct options.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            HorizontalDivider()
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            HorizontalDivider()
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
  

Use a Detailed Drop-down Menu when you want to group options with dividers and icons.

Examples:

• Organize actions in a profile menu
• Group settings with visual cues
• Enhance navigation menus

---

Drop-down Menu Properties

Understand the key properties used in the drop-down menu examples.

Property	Usage
expanded*	Required: Controls menu visibility (true/false)
onDismissRequest*	Required: Handles menu dismissal
text*	Required: Defines menu item content
onClick*	Required: Handles item click events
leadingIcon	Displays an icon at the start of a menu item
trailingIcon	Displays an icon at the end of a menu item