Context menus
Edit pageLast modified: 17 December 2024Compose Multiplatform for desktop provides out-of-the-box support for text context menus and allows you to conveniently tailor any context menus by adding more items, setting up themes, and customizing text.
Context menu in a custom area
You can create a context menu for any arbitrary area of your application. Use ContextMenuArea to define a container where the right mouse click will trigger the appearance of a context menu:
ContextMenuArea(items = { listOf( ContextMenuItem({...}
Set up theming
You can customize context menu colors to create a responsive UI that matches the system settings and avoid harsh contrast changes when switching between applications. For default light and dark themes, there are two built-in implementations: LightDefaultContextMenuRepresentation and DarkDefaultContextMenuRepresentation. They are not applied to context menu colors automatically, so you need to set a suitable theme via LocalContextMenuRepresentation:
MaterialTheme( colors = if (isSystemInDarkTheme()) darkColors() else{...}
Localize menu items
By default, the context menu will appear in the preferred language of your system settings:
If you want to use a specific language, specify it as a default language explicitly before running your application:
java.util.Locale.setDefault(java.util.Locale("en"))Text context menu
Default text context menu
Compose Multiplatform for desktop offers built-in context menus for TextField and selectable Text.
The default context menu for a text field includes the following actions, depending on the cursor's position and the selection range: copy, cut, paste, and select all. This standard context menu is available by default in the material TextField (androidx.compose.material.TextField or androidx.compose.material3.TextField) and the foundation BasicTextField (androidx.compose.foundation.text.BasicTextField).
TextField( value = text.value, onValueChange ={...}
The default context menu for a simple text element includes only the copy action. To enable a context menu for a Text component, make the text selectable by wrapping it in a SelectionContainer:
SelectionContainer { Text({...}
Add custom items
To add custom context menu actions for the TextField and Text components, specify new items via ContextMenuItem and add them to the hierarchy of context menu items via ContextMenuDataProvider. For example, the following code sample shows how to add two new custom actions to the default context menus of a text field and a simple selectable text element:
ContextMenuDataProvider( items = { listOf( ContextMenuItem({...}
Override default text context menu
To override the default context menu for text fields and selectable text elements, override the TextContextMenu interface. In the following code sample, we reuse the original TextContextMenu, but add one additional item to the bottom of the list. The new item adjusts to the text selection:
CompositionLocalProvider( LocalTextContextMenu provides object : TextContextMenu {{...}
Swing interoperability
If you are embedding Compose code into an existing Swing application and need the context menu to match the appearance and behavior of other parts of the application, you can use the JPopupTextMenu class. In this class, LocalTextContextMenu uses Swing's JPopupMenu for context menus in Compose components.
fun JPopupTextMenuProvider(owner: Component, content: @Composable () -> Unit){...}
What's next
Explore the tutorials about other desktop components.
Thanks for your feedback!