Compose Material Context Menus

Implementation of context (right-click) menus for Compose Mutliplatform.

Features

This library is built on top of Compose Multiplatform's context menu API as an alternate ContextMenuRepresentation. In addition to Compose's functionality, this library adds:

• Customizable theming, by default compliant with Material 2/3 menus
• Material menu items with icons, enabled/disabled states, and keyboard shortcuts
• Dividers
• Nested sub-menus
• Custom @Composable item content
• Scroll bars when menu is larger than the window
• Context menus in overflow (triple-dot) buttons

This repository includes a simple demo application to play with the library. Run with ./gradlew :demo:run.

Known issues

• Dropdown height extends slightly beyond the window size if the menu is larger than the window (see JetBrains/compose-multiplatform#3513)

Usage

Add the dependency to your project (ensuring that the mavenCentral() repository is included):

implementation("io.github.dzirbel:compose-material-context-menu:0.3.1")

See the :demo project in this repository for usage examples.

Application

Supply a MaterialContextMenuRepresentation as the LocalContextMenuRepresentation at the root of your application's composition:

// apply the MaterialTheme first to use its colors in the MaterialContextMenuRepresentation
MaterialTheme(colors = colors) {
    CompositionLocalProvider(
        LocalContextMenuRepresentation provides MaterialContextMenuRepresentation(),
        // optional: use Material text field context menu items, with icons and keyboard shortcuts
        LocalTextContextMenu provides MaterialTextContextMenu,
    ) {
        // application content
    }
}

Styling (dimensions, colors, etc) of the menus can be customized by providing measurements, colors, etc to MaterialContextMenuRepresentation().

Context menus are created as in the context menu API, i.e. with a ContextMenuArea() wrapping the right-clickable content.

Item types

In addition to the standard ContextMenuItem, this library adds:

• MaterialContextMenuItem: an augmented menu item with optional enabled state and leadingIcon/trailingIcon
  • Icons are provided in the ContextMenuIcon interface, and support icons from Painter, resource path, ImageVector, or ImageBitmap
  • Icons may also be any generic @Composable content or a list of ContextMenuShortcuts representing keyboard shortcuts
• ContextMenuGroup: a group of menu items, displayed as a nested menu on hover
• ContextMenuDivider: a divider line between items
• CustomContentContextMenuItem: a menu item with custom @Composable content, with standard styling (clickable, etc) applied
• GenericContextMenuItem: a menu item with custom @Composable content and no standard styling applied

Overflow button

To show context menus with a left-click on an overflow button, this library also provides a standalone ContextMenuOverflowButton() composable.