Compose Action Menu
This multi-platform library provides an easy-to-use action menu for Compose, since Compose doesn't offer this by default.
Features
- Icons (optional);
- Selectable/checkable items;
- Nested sub menus;
- Automatic overflow for items that don't fit the specified maximum;
- Kotlin Multiplatform (KMP) since version 2.0.0, supporting Android, iOS and JVM (desktop).
Installation
dependencies {
implementation("nl.jacobras:compose-action-menu:2.0.0")
}
Note: version 2 and newer are available from Maven Central, whereas previous versions were distributed through JitPack.
See also: Migrating to V2.
Compose version
Each version depends on specific Compose dependencies.
Compose 1.1.0-rc01 | |
Compose 1.3.3 | |
Compose 1.4.3 | |
Compose Multiplatform 1.5.1 |
Usage
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) }
)
Supported item types
Several different type of actions can be used. These are all sub classes of ActionItem
.
- Regular item:
RegularActionItem
; - Checkable item:
CheckableActionItem
; - Radio-toggleable item:
RadioActionItem
; - Groups:
GroupActionItem
.
Creating a group
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)
)
Customisation
ActionMenu
takes some parameters:
maxNumberOfIcons
Number of icons to show, including overflow menu icon (if needed);colors
Optional color configuration.
ActionItem
s can be customised too:
- Use
iconVector
oriconDrawable
to show an icon next to the item's title; - Set
showAsAction
to change if an item will be shown as an icon or in the overflow menu.
Testing
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"
.
Migrating from v1 to v2
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:
RegularActionItem(
title = stringResource(R.string.search),
icon = painterResource(R.drawable.search)
)
Sample apps
The repository contains two sample apps.
- Run Android:
gradlew sample-app:installDebug
- Run Desktop:
gradlew sample-desktop:run
Production example
My note taking app uses ComposeActionMenu:
https://play.google.com/store/apps/details?id=nl.jacobras.notes