IssueTracker

Jetpack Compose version: 1.5.1 (androidx.compose:compose-bom:2023.09.00)

Jetpack Compose component used: androidx.compose.material3:material3:1.2.0-alpha07

Android Studio Build: Android Studio Giraffe | 2022.3.1 Patch 1

Kotlin version: 1.9.10

If you place DropdownMenu inside title of TopAppBar and there is a composable with fillMaxHeight Modifier, then the DropdownMenu will not be placed under the TopAppBar, but under the center of the Scaffold content. The workaround is to use height(64.dp) Modifier instead of fillMaxHeight().

Code sample:

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                var expanded by remember { mutableStateOf(false) }
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .fillMaxHeight() // replace it with height(64.dp) to workaround
                        .clickable { expanded = true }
                ) {
                    Text(text = "Click here")
                }
                DropdownMenu(
                    expanded = expanded,
                    onDismissRequest = { expanded = false }
                ) {
                    ...
                }
            }
        )
    }
) { paddingValues ->
    ...
}

Also you can download the sample project.