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.

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.

ActionItems can be customised too:

Use iconVector or iconDrawable 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

ComposeActionMenu

General

Additional

Advertisement