OverlayIconCascadingDropdownMenu

OverlayIconCascadingDropdownMenu is an IconButton wrapper that opens an OverlayCascadingListPopup when clicked. It is intended for toolbar action slots — such as the actions area of TopAppBar — where a single icon needs to expand into a menu that contains submenus. Items whose DropdownItem.children is non-empty become submenu triggers; cascading depth is limited to 2.

Prerequisite

This component depends on Scaffold providing MiuixPopupHost to render popup content. It must be used within Scaffold, otherwise popup content will not render correctly.

Import

kotlin

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

Basic Usage

Place OverlayIconCascadingDropdownMenu in the actions slot of a TopAppBar (or SmallTopAppBar). Top-level items with non-empty children render a chevron and expand inline on click.

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 = {
                OverlayIconCascadingDropdownMenu(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 = { /* ... */ }),
    ),
)

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

Component States

Disabled State

kotlin

OverlayIconCascadingDropdownMenu(
    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