New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

DropdownMenuItem

Android
Desktop

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

@Composable
fun DropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
)

Parameters

namedescription
onClickCalled when the menu item was clicked
modifierThe modifier to be applied to the menu item
enabledControls the enabled state of the menu item - when false, the menu item will not be clickable and [onClick] will not be invoked
contentPaddingthe padding applied to the content of this menu item
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this menu item. You can use this to change the menu item's appearance or preview the menu item in different states. Note that if null is provided, interactions will still happen internally.
@Composable
fun DropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
)

Parameters

namedescription
onClickCalled when the menu item was clicked
modifierThe modifier to be applied to the menu item
enabledControls the enabled state of the menu item - when false, the menu item will not be clickable and [onClick] will not be invoked
contentPaddingthe padding applied to the content of this menu item
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this menu item. You can use this to change the menu item's appearance or preview the menu item in different states. Note that if null is provided, interactions will still happen internally.

Code Example

@Composable
@Sampled
fun MenuSample() {
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.TopStart)) {
        IconButton(onClick = { expanded = true }) {
            Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(onClick = { /* Handle refresh! */ }) {
                Text("Refresh")
            }
            DropdownMenuItem(onClick = { /* Handle settings! */ }) {
                Text("Settings")
            }
            Divider()
            DropdownMenuItem(onClick = { /* Handle send feedback! */ }) {
                Text("Send Feedback")
            }
        }
    }
}