Material3 ‐ ExposedDropDown Menu - devrath/Material-3-Design-Kit GitHub Wiki

Contents
Demo representation
Code

Demo representation

Light Theme Dark Theme

Code

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(30.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {

        var isExpanded by remember { mutableStateOf(false) }

        var actionText by remember { mutableStateOf("") }

        ExposedDropdownMenuBox(
            expanded = isExpanded,
            onExpandedChange = {
                isExpanded = it
            }
        ) {
            TextField(
                value = actionText,
                onValueChange = { },
                readOnly = true,
                trailingIcon = {
                    ExposedDropdownMenuDefaults.TrailingIcon(
                        expanded = isExpanded
                    )
                },
                colors = ExposedDropdownMenuDefaults.textFieldColors(),
                modifier = Modifier.menuAnchor(),
                placeholder = { Text(text = "Action") }
            )

            ExposedDropdownMenu(
                expanded = isExpanded,
                onDismissRequest = { isExpanded = false }
            ) {
                DropdownMenuItem(
                    text = { Text(text = "Action - 1") },
                    onClick = {
                        actionText = "Action - 1"
                        isExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text(text = "Action - 2") },
                    onClick = {
                        actionText = "Action - 2"
                        isExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text(text = "Action - 3") },
                    onClick = {
                        actionText = "Action - 3"
                        isExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text(text = "Action - 4") },
                    onClick = {
                        actionText = "Action - 4"
                        isExpanded = false
                    }
                )
                DropdownMenuItem(
                    text = { Text(text = "Action - 5") },
                    onClick = {
                        actionText = "Action - 5"
                        isExpanded = false
                    }
                )

            }
        }

    }
}
⚠️ **GitHub.com Fallback** ⚠️