Is there a way to draw multi-level menus with `DropdownMenu` (i.e. have `DropdownMenuItem`s open a s...

# compose

[julioromano]

Is there a way to draw multi-level menus with DropdownMenu (i.e. have `DropdownMenuItem`s open a sub-DropdownMenu) ?

[Colton Idle]

Not sure if this is what you're asking for, but something like this in Compose would be cool.

Cc @saket https://github.com/saket/cascade

[julioromano]

Yeah that would be cool, even without fancy animation, just like https://material.io/components/menus

[julioromano]

Oh it’s called “Cascading menu” and Material spec says it should be desktop only 😕

[Zach Klippenstein (he/him) [MOD]]

👀 looks at Google Docs’ app menus…

[Colton Idle]

***installs google docs***

[Zach Klippenstein (he/him) [MOD]]

This is iOS, but last time I looked it did the same thing on Android.

Image from iOS.MP4

[julioromano]

Yepp, still there on Android too. Cool 🙂 So Compose material package “must” have an implementation… 🤣

[julioromano]

Pasting here a concoction I came up with:

enum class SomeState {
  HIDDEN,
  MENU,
  SUBMENU,
}

@Composable
fun MenuWithSubmenu(someState: MutableState<SomeState>) {
  var state by someState
  DropdownMenu(
    expanded = state != SomeState.HIDDEN,
    onDismissRequest = { state = SomeState.HIDDEN }
  ) {
    Crossfade(targetState = state) {
      Column {
        when (it) {
          SomeState.HIDDEN -> {}
          <http://SomeState.MENU|SomeState.MENU> -> {
            DropdownMenuItem(onClick = { state = SomeState.SUBMENU }) {
              Text(text = "Something deep...")
            }
          }
          SomeState.SUBMENU -> {
            DropdownMenuItem(onClick = { TODO() }) {
              Text(text = "Click me!")
            }
          }
        }
      }
    }
  }
}