Jetpack compose popup menu

Since DropDownPopup was removed, I implemented one using DropDownMenu instead like this:

PopupMenu:

@Composable fun PopupMenu( menuItems: List<String>, onClickCallbacks: List<() -> Unit>, showMenu: Boolean, onDismiss: () -> Unit, toggle: @Composable () -> Unit, ) { DropdownMenu( toggle = toggle, expanded = showMenu, onDismissRequest = { onDismiss() }, ) { menuItems.forEachIndexed { index, item -> DropdownMenuItem(onClick = { onDismiss() onClickCallbacks[index] }) { Text(text = item) } } } } 

Toggle (thing to long click on to trigger PopupMenu):

@Preview @Composable fun Toggle() { var showMenu by remember { mutableStateOf(false) } PopupMenu( menuItems = listOf("Delete"), onClickCallbacks = listOf { println("Deleted") }, showMenu = showMenu, onDismiss = { showMenu = false }) { Text( modifier = Modifier.clickable(onClick = {}, onLongClick = { showMenu = true }), text = "Long click here", ) } } 

After some research I found a solution to this, the key component is DropdownPopup

@Composable fun LiveDataComponentList(productList: List<Product>) { AdapterList(data = productList) { product -> Clickable(onClick = { PopupState.toggleOwner(product) }) { Card(...) {...} } if (PopupState.owner == product) { DropdownPopup(dropDownAlignment = DropDownAlignment.End) { Surface( shape = RoundedCornerShape(4.dp), elevation = 16.dp, color = Color.White, modifier = Modifier.gravity(Alignment.End)+ Modifier.padding(end = 10.dp) ) { Column(modifier = Modifier.padding(10.dp)) { MenuItem(text ="Edit", onClick = {}) MenuItem(text = "Delete", onClick = {}) MenuItem(text = "Details", onClick = {}) } } } } } } @Composable fun MenuItem(text: String, onClick: () -> Unit) { Clickable(onClick = onClick, modifier = Modifier.padding(6.dp)) { Text(text = text, style = MaterialTheme.typography.subtitle1) } } 

This solution works fine with compose version dev10

For My use case I created a Icon button which has pop up menu and that can be used where pop menu is needed.

@Composable fun PopUpMenuButton( options: List<PopUpMenuItem>, action: (String) -> Unit, iconTint: Color = Color.Black, modifier: Modifier ) { var expanded by remember { mutableStateOf(false) } Column { Box(modifier = Modifier.size(24.dp)) { IconButton(onClick = { expanded = !expanded }) { Icon( painter = painterResource(id = R.drawable.ic_dots), contentDescription = null, modifier = Modifier.wrapContentSize(), tint = iconTint ) } } Box(modifier = modifier) { DropdownMenu( expanded = expanded, onDismissRequest = { expanded = false }, modifier = Modifier .widthIn(min = 120.dp, max = 240.dp) .background(MaterialTheme.colors.background) ) { options.forEachIndexed { _, item -> DropdownMenuItem(onClick = { expanded = false action(item.id) }) { Row( horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, ) { Icon( painterResource(id = item.icon), contentDescription = null, tint = iconTint, ) Spacer(modifier = Modifier.width(8.dp)) Text( text = item.label, style = MaterialTheme.typography.body1, overflow = TextOverflow.Ellipsis ) } } if (item.hasBottomDivider) { Divider() } } } } } } 

Then I created a simple data class for defining menu item

data class PopUpMenuItem( val id: String, val label: String, val icon: Int, val hasBottomDivider: Boolean = false, ) 

Then at the calling side I simply use this button like this

 PopUpMenuButton( modifier = Modifier.wrapContentSize(), options = PopMenuOptionsProvider.sectionCardMenu, iconTint = MaterialTheme.extendedColor.regularGray, action = { menuId -> onSectionMenuAction(menuId) } ) 

It can be further refactored to make it more extensible, but this worked for me.