OverlayIconDropdownMenu

OverlayIconDropdownMenu is an IconButton wrapper that opens an OverlayDropdownPopup 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 list of actions, sort options, or filter toggles.

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.OverlayIconDropdownMenu
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem

Basic Usage

Place OverlayIconDropdownMenu in the actions slot of a TopAppBar (or SmallTopAppBar). Clicking the icon opens the popup. This is the typical use case — a toolbar action button that expands into a list of menu items.

kotlin

val entry = DropdownEntry(
    items = listOf("Edit", "Duplicate", "Share", "Delete").map { text ->
        DropdownItem(text = text, onClick = { /* handle action */ })
    }
)

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "Inbox",
            actions = {
                OverlayIconDropdownMenu(entry = entry) {
                    Icon(imageVector = MiuixIcons.Edit, contentDescription = "Action menu")
                }
            }
        )
    }
) { padding ->
    // page content
}

You can also use OverlayIconDropdownMenu outside a TopAppBar — anywhere an IconButton would normally fit, so long as the surrounding tree is hosted by a Scaffold.

Sort / Single Select

For sort menus or radio-style choices, set selected on each DropdownItem and let collapseOnSelection = true (default for the entry overload) close the popup after each pick.

kotlin

var sortIndex by remember { mutableStateOf(0) }
val entry = DropdownEntry(
    items = listOf("Name", "Date", "Size").mapIndexed { index, text ->
        DropdownItem(text = text, selected = sortIndex == index, onClick = { sortIndex = index })
    }
)

Scaffold {
    OverlayIconDropdownMenu(entry = entry) {
        Icon(imageVector = MiuixIcons.Sort, contentDescription = "Sort")
    }
}

Multi Select

Track a Set of selected values, toggle each item from onClick, and pass collapseOnSelection = false so the popup stays open between picks.

kotlin

var selected by remember { mutableStateOf(setOf("Photos")) }
val entry = DropdownEntry(
    items = listOf("Photos", "Videos", "Files").map { text ->
        DropdownItem(
            text = text,
            selected = text in selected,
            onClick = {
                selected = if (text in selected) selected - text else selected + text
            }
        )
    }
)

Scaffold {
    OverlayIconDropdownMenu(entry = entry, collapseOnSelection = false) {
        Icon(imageVector = MiuixIcons.SelectAll, contentDescription = "Multiple selection")
    }
}

Pass entries: List<DropdownEntry> to render multiple groups separated by dividers.

kotlin

val entries = listOf(
    DropdownEntry(items = listOf("Item A-1", "Item A-2").map { DropdownItem(text = it) }),
    DropdownEntry(items = listOf("Item B-1", "Item B-2", "Item B-3").map { DropdownItem(text = it) })
)

Scaffold {
    OverlayIconDropdownMenu(entries = entries) {
        Icon(imageVector = MiuixIcons.MoreCircle, contentDescription = "More")
    }
}

Component States

Disabled State

kotlin

OverlayIconDropdownMenu(
    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.

Properties