WindowIconCascadingDropdownMenu

WindowIconCascadingDropdownMenu is an IconButton wrapper that opens a WindowCascadingListPopup (rendered at window level via Dialog) when clicked. Unlike OverlayIconCascadingDropdownMenu, it does not require a Scaffold. Items whose DropdownItem.children is non-empty become submenu triggers; cascading depth is limited to 2.

Import

kotlin

import top.yukonga.miuix.kmp.menu.WindowIconCascadingDropdownMenu
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem

Basic Usage

Place WindowIconCascadingDropdownMenu in the actions slot of a TopAppBar (or SmallTopAppBar). Top-level items with non-empty children render a chevron and expand inline on click. No Scaffold is required around the menu itself, but a Scaffold is still the natural way to host a TopAppBar.

kotlin

var sortIndex by remember { mutableStateOf(0) }
var viewIndex by remember { mutableStateOf(0) }
var filterIndex by remember { mutableStateOf(0) }

val sortLabels = listOf("Sort by capture date", "Sort by date added")
val viewLabels = listOf("Group by date", "Compact")
val filterLabels = listOf("All items", "Camera album")

val entries = listOf(
    DropdownEntry(
        items = sortLabels.mapIndexed { idx, label ->
            DropdownItem(
                text = label,
                selected = sortIndex == idx,
                onClick = { sortIndex = idx },
            )
        },
    ),
    DropdownEntry(
        items = listOf(
            DropdownItem(
                text = "View mode",
                children = viewLabels.mapIndexed { idx, label ->
                    DropdownItem(
                        text = label,
                        selected = viewIndex == idx,
                        onClick = { viewIndex = idx },
                    )
                },
            ),
            DropdownItem(
                text = "Filter",
                children = filterLabels.mapIndexed { idx, label ->
                    DropdownItem(
                        text = label,
                        selected = filterIndex == idx,
                        onClick = { filterIndex = idx },
                    )
                },
            ),
        ),
    ),
)

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "Library",
            actions = {
                WindowIconCascadingDropdownMenu(entries = entries) {
                    Icon(imageVector = MiuixIcons.Tune, contentDescription = "Adjust")
                }
            }
        )
    }
) { padding ->
    // page content
}

Single Entry Overload

When you only need one group of items, use the entry overload to skip the surrounding listOf(...).

kotlin

val entry = DropdownEntry(
    items = listOf(
        DropdownItem(
            text = "View mode",
            children = listOf(
                DropdownItem(text = "Group by date", onClick = { /* ... */ }),
                DropdownItem(text = "Compact", onClick = { /* ... */ }),
            ),
        ),
        DropdownItem(text = "Refresh", onClick = { /* ... */ }),
    ),
)

WindowIconCascadingDropdownMenu(entry = entry) {
    Icon(imageVector = MiuixIcons.Tune, contentDescription = "Adjust")
}

Component States

Disabled State

kotlin

WindowIconCascadingDropdownMenu(
    entry = DropdownEntry(items = listOf(DropdownItem(text = "Option 1"))),
    enabled = false,
) {
    Icon(imageVector = MiuixIcons.MoreCircle, contentDescription = "More")
}

The menu is also implicitly disabled when no DropdownEntry contains any items.

Cascading Depth

Cascading depth is capped at 2. Items at the secondary level cannot have their own children; deeper trees are silently ignored.

Properties