Offers an easy-to-use action menu with icons, selectable items, nested submenus, and automatic overflow handling. Supports customizations and provides test tags for each menu item.
This multi-platform library provides an easy-to-use action menu for Compose, since Compose doesn't offer this by default.
A web demo is available at https://jacobras.github.io/ComposeActionMenu/.
dependencies {
implementation("nl.jacobras:compose-action-menu:3.1.1")
}
Compose Action Menu version 3 is built upon Material 3. The custom colour names have been changed.
2.x:
ActionMenu(
items = listOf(),
colors = DefaultActionMenuColors(
dropdownIconTint = myContentColor,
dropdownBackgroundColor = myOverflowContainerColor
)
)
Compose Action Menu version 2 is built using KMP. Android-specific resource support is replaced with broader string + Painter support.
1.x:
RegularActionItem(
titleResId = R.string.search,
iconDrawable = R.drawable.search
)
2.x:
Each version depends on specific Compose dependencies.
val toolbarActions = listOf(
RegularActionItem(
key = "search",
title = stringResource(R.string.search),
iconVector = Icons.Filled.Search,
onClick = { /* TODO: Open search screen */ }
)
)
TopAppBar(
actions = { ActionMenu(items = toolbarActions) }
)
Several different type of actions can be used. These are all sub classes of ActionItem.
RegularActionItem;CheckableActionItem;RadioActionItem;GroupActionItem.Is as simple as:
val subOption1 = RegularActionItem(key = "subOption1", /* ... */)
val subOption2 = RegularActionItem(key = "subOption2", /* ... */)
val subOption3 = RegularActionItem(key = "subOption3", /* ... */)
val group = GroupActionItem(
key = "myGroup",
title = stringResource(R.string.group_title),
childOptions = listOf(subOption1, subOption2, subOption3)
)
ActionMenu takes some parameters:
maxNumberOfIcons Number of icons to show, including overflow menu icon (if needed);colors Optional color configuration. Usage: colors = ActionMenuDefaults.colors(...).ActionItems can be customised too:
iconVector or iconDrawable to show an icon next to the item's title;showAsAction to change if an item will be shown as an icon or in the overflow menu.Every menu item has a test tag attached to it which is a combination of a "ActionMenu" prefix and the item's key. Example test usage:
// Menu configuration:
val item = RegularActionItem(key = "myKey", /* ... */)
// Test:
composeTestRule.onNodeWithTag("ActionMenu#myKey").performClick()
There's a reserved key for the overflow icon: "ActionMenu#overflow".
The repository contains two sample apps.
gradlew sample-app:installDebuggradlew sample-desktop:runMy note taking app uses ComposeActionMenu:
https://play.google.com/store/apps/details?id=nl.jacobras.notes
3.x:
ActionMenu(
items = listOf(/* items */),
colors = ActionMenuDefaults.colors(
contentColor = myContentColor,
overflowContainerColor = myOverflowContainerColor,
overflowContentColor = myContentColor
)
)
RegularActionItem(
title = stringResource(R.string.search),
icon = painterResource(R.drawable.search)
)
| Compose Multiplatform 1.10.1 | Material 3 | |
| Compose Multiplatform 1.6.11 | Material 3 | |
| Compose Multiplatform 1.5.1 | Material 2 | |
| Compose 1.4.3 | Material 2 | |
| Compose 1.3.3 | Material 2 | |
| Compose 1.1.0-rc01 | Material 2 |
Surfaced from shared tags and platforms — no rankings paid for.