{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

AndroidMenuKt

public final class AndroidMenuKt


Summary

Public methods

static final void
@Composable
DropdownMenu(
    boolean expanded,
    @NonNull Function0<Unit> onDismissRequest,
    @NonNull Modifier modifier,
    @NonNull DpOffset offset,
    @NonNull ScrollState scrollState,
    @NonNull PopupProperties properties,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design dropdown menu.

static final void
@Composable
DropdownMenuItem(
    @Composable @NonNull Function0<Unit> text,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    boolean enabled,
    @NonNull MenuItemColors colors,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource
)

Material Design dropdown menu item.

Public methods

@Composable
public static final void DropdownMenu(
    boolean expanded,
    @NonNull Function0<Unit> onDismissRequest,
    @NonNull Modifier modifier,
    @NonNull DpOffset offset,
    @NonNull ScrollState scrollState,
    @NonNull PopupProperties properties,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content
)

Material Design dropdown menu.

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Dropdown menu image

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'. Note that a DropdownMenu by itself will not take up any space in a layout, as the menu is displayed in a separate window, on top of other content.

The content of a DropdownMenu will typically be DropdownMenuItems, as well as custom content. Using DropdownMenuItems will result in a menu that matches the Material specification for menus. Also note that the content is placed inside a scrollable Column, so using a LazyColumn as the root layout inside content is unsupported.

onDismissRequest will be called when the menu should close - for example when there is a tap outside the menu, or when the back key is pressed.

DropdownMenu changes its positioning depending on the available space, always trying to be fully visible. Depending on layout direction, first it will try to align its start to the start of its parent, then its end to the end of its parent, and then to the edge of the window. Vertically, it will try to align its top to the bottom of its parent, then its bottom to top of its parent, and then to the edge of the window.

An offset can be provided to adjust the positioning of the menu for cases when the layout bounds of its parent do not coincide with its visual bounds.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Email
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign

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(
            text = { Text("Edit") },
            onClick = { /* Handle edit! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Edit,
                    contentDescription = null
                )
            })
        DropdownMenuItem(
            text = { Text("Settings") },
            onClick = { /* Handle settings! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Settings,
                    contentDescription = null
                )
            })
        HorizontalDivider()
        DropdownMenuItem(
            text = { Text("Send Feedback") },
            onClick = { /* Handle send feedback! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Email,
                    contentDescription = null
                )
            },
            trailingIcon = { Text("F11", textAlign = TextAlign.Center) })
    }
}

Example usage with a ScrollState to control the menu items scroll position:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var expanded by remember { mutableStateOf(false) }
val scrollState = rememberScrollState()
Box(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.TopStart)
) {
    IconButton(onClick = { expanded = true }) {
        Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        scrollState = scrollState
    ) {
        repeat(30) {
            DropdownMenuItem(
                text = { Text("Item ${it + 1}") },
                onClick = { /* TODO */ },
                leadingIcon = {
                    Icon(
                        Icons.Outlined.Edit,
                        contentDescription = null
                    )
                })
        }
    }
    LaunchedEffect(expanded) {
        if (expanded) {
            // Scroll to show the bottom menu items.
            scrollState.scrollTo(scrollState.maxValue)
        }
    }
}
Parameters
boolean expanded

whether the menu is expanded or not

@NonNull Function0<Unit> onDismissRequest

called when the user requests to dismiss the menu, such as by tapping outside the menu's bounds

@NonNull Modifier modifier

Modifier to be applied to the menu's content

@NonNull DpOffset offset

DpOffset from the original position of the menu. The offset respects the LayoutDirection, so the offset's x position will be added in LTR and subtracted in RTL.

@NonNull ScrollState scrollState

a ScrollState to used by the menu's content for items vertical scrolling

@NonNull PopupProperties properties

PopupProperties for further customization of this popup's behavior

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull ColumnScopeUnit> content

the content of this dropdown menu, typically a DropdownMenuItem

@Composable
public static final void DropdownMenuItem(
    @Composable @NonNull Function0<Unit> text,
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    boolean enabled,
    @NonNull MenuItemColors colors,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource
)

Material Design dropdown menu item.

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Dropdown menu image

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Email
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign

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(
            text = { Text("Edit") },
            onClick = { /* Handle edit! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Edit,
                    contentDescription = null
                )
            })
        DropdownMenuItem(
            text = { Text("Settings") },
            onClick = { /* Handle settings! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Settings,
                    contentDescription = null
                )
            })
        HorizontalDivider()
        DropdownMenuItem(
            text = { Text("Send Feedback") },
            onClick = { /* Handle send feedback! */ },
            leadingIcon = {
                Icon(
                    Icons.Outlined.Email,
                    contentDescription = null
                )
            },
            trailingIcon = { Text("F11", textAlign = TextAlign.Center) })
    }
}
Parameters
@Composable @NonNull Function0<Unit> text

text of the menu item

@NonNull Function0<Unit> onClick

called when this menu item is clicked

@NonNull Modifier modifier

the Modifier to be applied to this menu item

@Composable Function0<Unit> leadingIcon

optional leading icon to be displayed at the beginning of the item's text

@Composable Function0<Unit> trailingIcon

optional trailing icon to be displayed at the end of the item's text. This trailing icon slot can also accept Text to indicate a keyboard shortcut.

boolean enabled

controls the enabled state of this menu item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull MenuItemColors colors

MenuItemColors that will be used to resolve the colors used for this menu item in different states. See MenuDefaults.itemColors.

@NonNull PaddingValues contentPadding

the padding applied to the content of this menu item

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this menu item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this menu item in different states.