A dropdown menu is a compact way of displaying multiple choices.
@Composable
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") }
}
}
}
@Composable
fun MenuWithScrollStateSample() {
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(onClick = { /* Handle item! */ }) { Text("Item ${it + 1}") }
}
}
LaunchedEffect(expanded) {
if (expanded) {
// Scroll to show the bottom menu items.
scrollState.scrollTo(scrollState.maxValue)
}
}
}
}