cascade offers a drop-in replacement for DropdownMenu with support for nested menus, smooth height animations and 0dp vertical content paddings.
implementation "me.saket.cascade:cascade-compose:2.2.0"
+implementation "androidx.compose.material3:material3:…" // https://d.android.com/jetpack/androidx/releases/compose-material3
+var isMenuVisible by rememberSaveable { mutableStateOf(false) }
+
+CascadeDropdownMenu(
+ expanded = isMenuVisible,
+ onDismissRequest = { isMenuVisible = false }
+) {
+ DropdownMenuItem(
+ text = { Text("Horizon") },
+ children = {
+ DropdownMenuItem(
+ text = { Text("Zero Dawn") },
+ onClick = { … }
+ )
+ DropdownMenuItem(
+ text = { Text("Forbidden West") },
+ onClick = { … }
+ )
+ }
+ )
+}
+For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, CascadeState#navigateBack() can be used.
val state = rememberCascadeState()
+CascadeDropdownMenu(
+ state = state,
+ …
+) {
+ DropdownMenuItem(
+ text = { Text("Remove") },
+ childrenHeader = {
+ // childrenHeader is an optional parameter. If you don't provide one, cascade
+ // will automatically use the text composable ("Remove" in this example).
+ DropdownMenuHeader { Text("Are you sure?") }
+ },
+ children = {
+ DropdownMenuItem(
+ text = { Text("Burn them all") },
+ onClick = { … }
+ )
+ DropdownMenuItem(
+ text = { Text("Take me back") },
+ onClick = { state.navigateBack() }
+ )
+ },
+ )
+}
+Because cascade reuses the same components as DropdownMenu, you can follow the
+official material3 documentation for theming menus and expect the
+specs to work with cascade.
CascadeDropdownMenu| Design attribute | +Theme token | +
|---|---|
| Shape | +MaterialTheme.shapes.extraSmall |
+
| Background color | +MaterialTheme.colorScheme.surface |
+
DropdownMenuHeader| Design attribute | +Theme token | +
|---|---|
| Content color | +LocalContentColor with 60% opacity |
+
| Text style | +MaterialTheme.typography.labelLarge with 90% font size and letter spacing |
+
DropdownMenuItem| Design attribute | +Theme token | +
|---|---|
| Icon size | +24dp minimum |
+
| Colors | +MenuItemColors |
+
| Text style | +MaterialTheme.typography.labelLarge |
+
cascade builds nested popup menus with smooth height animations. It is designed to be a drop-in replacement for both PopupMenu and DropdownMenu, so using it in your project is beautifully only a word away. Try out the sample app to see it in action.
implementation "me.saket.cascade:cascade:2.2.0"
+implementation "me.saket.cascade:cascade-compose:2.2.0"
+See additional documentation for,
+cascade builds nested popup menus with smooth height animations. It is designed to be a drop-in replacement for both PopupMenu and DropdownMenu, so using it in your project is beautifully only a word away. Try out the sample app to see it in action.
implementation \"me.saket.cascade:cascade:2.2.0\"\nimplementation \"me.saket.cascade:cascade-compose:2.2.0\"\n- DropdownMenu(\n+ CascadeDropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n) { \n DropdownMenuItem(\u2026)\n DropdownMenuItem(\u2026)\n}\n- val popup = PopupMenu(context, anchor)\n+ val popup = CascadePopupMenu(context, anchor)\n popup.inflate(R.menu.nicolas_cage_movies)\n popup.show()\nSee additional documentation for,
cascade offers a drop-in replacement for DropdownMenu with support for nested menus, smooth height animations and 0dp vertical content paddings.
implementation \"me.saket.cascade:cascade-compose:2.2.0\"\nimplementation \"androidx.compose.material3:material3:\u2026\" // https://d.android.com/jetpack/androidx/releases/compose-material3\nvar isMenuVisible by rememberSaveable { mutableStateOf(false) }\nCascadeDropdownMenu(\nexpanded = isMenuVisible,\nonDismissRequest = { isMenuVisible = false }\n) {\nDropdownMenuItem(\ntext = { Text(\"Horizon\") },\nchildren = {\nDropdownMenuItem(\ntext = { Text(\"Zero Dawn\") },\nonClick = { \u2026 }\n)\nDropdownMenuItem(\ntext = { Text(\"Forbidden West\") },\nonClick = { \u2026 }\n)\n}\n)\n}\nFor sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, CascadeState#navigateBack() can be used.
val state = rememberCascadeState()\nCascadeDropdownMenu(\nstate = state, \u2026\n) {\nDropdownMenuItem(\ntext = { Text(\"Remove\") },\nchildrenHeader = {\n// childrenHeader is an optional parameter. If you don't provide one, cascade\n// will automatically use the text composable (\"Remove\" in this example).\nDropdownMenuHeader { Text(\"Are you sure?\") }\n},\nchildren = {\nDropdownMenuItem(\ntext = { Text(\"Burn them all\") },\nonClick = { \u2026 }\n)\nDropdownMenuItem(\ntext = { Text(\"Take me back\") },\nonClick = { state.navigateBack() }\n)\n},\n)\n}\nBecause cascade reuses the same components as DropdownMenu, you can follow the official material3 documentation for theming menus and expect the specs to work with cascade.
CascadeDropdownMenu","text":"Design attribute Theme token Shape MaterialTheme.shapes.extraSmall Background color MaterialTheme.colorScheme.surface"},{"location":"compose/theming/#dropdownmenuheader","title":"DropdownMenuHeader","text":"Design attribute Theme token Content color LocalContentColor with 60% opacity Text style MaterialTheme.typography.labelLarge with 90% font size and letter spacing"},{"location":"compose/theming/#dropdownmenuitem","title":"DropdownMenuItem","text":"Design attribute Theme token Icon size 24dp minimum Colors MenuItemColors Text style MaterialTheme.typography.labelLarge"},{"location":"views/","title":"cascade","text":"cascade offers a drop-in replacement for PopupMenu. For guidance on creating & nesting menus, the official documentation can be followed while replacing any usages of PopupMenu with CascadePopupMenu.
implementation \"me.saket.cascade:cascade:2.2.0\"\n- val popup = PopupMenu(context, anchor)\n+ val popup = CascadePopupMenu(context, anchor)\n popup.inflate(R.menu.nicolas_cage_movies)\n popup.show()\nToolbar uses PopupMenu for showing overflow menu without offering any way to change this. If you're replacing all PopupMenu usages in your project with cascade, there are a few ways you could achieve consistency by forcing Toolbar to use cascade:
The safest way is to extract out your toolbar menu items with app:showAsAction=\"ifRoom\" into their own menu that is shown using cascade manually.
Alternatively, cascade offers an override using reflection but is currently incompatible with Proguard:
toolbar.overrideAllPopupMenus { context, anchor ->\nCascadePopupMenu(context, anchor)\n}\n// The lambda can be collapsed into a reference\n// if you're only using the two-param constructor.\ntoolbar.overrideAllPopupMenus(with = ::CascadePopupMenu)\ncascade was originally inspired by Google Drive's that uses a variety of complex controls. For apps that want to create something similar, a batteries-included CascadePopupWindow is provided for use with custom layouts.
val customMenuView: View = \u2026\nval popup = CascadePopupWindow(context)\npopup.contentView.addView(customMenuView) // Also see contentView.goBack().\npopup.show(anchor)\nI really like Google Drive's popup menu that smoothly animates between sub-menus. Is there any existing library that recreates this? pic.twitter.com/bnalL56pcR
\u2014 Saket Narayan (@saketme) October 5, 2020"},{"location":"views/navigation/","title":"Navigation","text":"For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, cascade provides a back navigator:
val popup = CascadePopupMenu(context, anchor)\npopup.menu.addSubMenu(\"Remove\").also {\nit.setHeaderTitle(\"Are you sure?\")\nit.add(\"Burn them all\")\nit.add(\"Take me back\").setOnMenuItemClickListener {\npopup.navigateBack()\n}\n}\nYou can also provide your own back navigator. This injection is useful if a navigator is needed before an instance of cascade can be created.
val backNavigator = CascadeBackNavigator()\nCascadePopupMenu(context, anchor, backNavigator)\ncascade is great for apps that prefer applying dynamic themes at runtime, which PopupMenu makes it extremely hard to do so. By providing a CascadePopupMenu.Styler object, you can adjust colors, spacings and text styles from Kotlin (example).
CascadePopupMenu(\nstyler = CascadePopupMenu.Styler(\u2026)\n)\nBy default, cascade will pick up values from your theme in the same way as PopupMenu would.
<style name=\"AppTheme\">\n<item name=\"popupMenuStyle\">@style/PopupMenuStyle</item>\n<item name=\"colorControlNormal\">@color/menu_icon_color</item>\n<item name=\"android:textColorPrimary\">@color/menu_item_text_color</item>\n<item name=\"android:textColorSecondary\">@color/menu_title_text_color</item>\n</style>\n<style name=\"PopupMenuStyle\" parent=\"@style/Widget.AppCompat.PopupMenu\">\n<item name=\"android:popupBackground\">...</item>\n<item name=\"android:popupElevation\">...</item>\n</style>\ncascade was originally inspired by Google Drive's that uses a variety of complex controls. For apps that want to create something similar, a batteries-included CascadePopupWindow is provided for use with custom layouts.
val customMenuView: View = …
+
+val popup = CascadePopupWindow(context)
+popup.contentView.addView(customMenuView) // Also see contentView.goBack().
+popup.show(anchor)
++ + + + + + + +I really like Google Drive's popup menu that smoothly animates between sub-menus. Is there any existing library that recreates this? pic.twitter.com/bnalL56pcR
— Saket Narayan (@saketme) October 5, 2020
cascade offers a drop-in replacement for PopupMenu. For guidance on creating & nesting menus, the official documentation can be followed while replacing any usages of PopupMenu with CascadePopupMenu.
- val popup = PopupMenu(context, anchor)
++ val popup = CascadePopupMenu(context, anchor)
+ popup.inflate(R.menu.nicolas_cage_movies)
+ popup.show()
+Toolbar uses PopupMenu for showing overflow menu without offering any way to change this. If you're replacing all PopupMenu usages in your project with cascade, there are a few ways you could achieve consistency by forcing Toolbar to use cascade:
The safest way is to extract out your toolbar menu items with app:showAsAction="ifRoom" into their own menu that is shown using cascade manually.
Alternatively, cascade offers an override using reflection but is currently incompatible with Proguard:
For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, cascade provides a back navigator:
val popup = CascadePopupMenu(context, anchor)
+
+popup.menu.addSubMenu("Remove").also {
+ it.setHeaderTitle("Are you sure?")
+ it.add("Burn them all")
+ it.add("Take me back").setOnMenuItemClickListener {
+ popup.navigateBack()
+ }
+}
+You can also provide your own back navigator. This injection is useful if a navigator is needed before an instance of cascade can be created.
cascade is great for apps that prefer applying dynamic themes at runtime, which PopupMenu makes it extremely hard to do so. By providing a CascadePopupMenu.Styler object, you can adjust colors, spacings and text styles from Kotlin (example).
By default, cascade will pick up values from your theme in the same way as PopupMenu would.
<style name="AppTheme">
+ <item name="popupMenuStyle">@style/PopupMenuStyle</item>
+ <item name="colorControlNormal">@color/menu_icon_color</item>
+ <item name="android:textColorPrimary">@color/menu_item_text_color</item>
+ <item name="android:textColorSecondary">@color/menu_title_text_color</item>
+</style>
+
+<style name="PopupMenuStyle" parent="@style/Widget.AppCompat.PopupMenu">
+ <item name="android:popupBackground">...</item>
+ <item name="android:popupElevation">...</item>
+</style>
+