Drop Down Menu in Kotlin Compose Multiplatform (KMP, KMM)

In today’s tutorial, we will learn how to implement a Material Drop Down Menu in Kotlin Compose Multiplatform (KMP, KMM) for Android, iOS, web, and desktop platforms. Follow all the steps in the tutorial with code to integrate a cross-platform drop-down component.

Drop Down Menu in Kotlin Compose Multiplatform (KMP, KMM):

Drop-down menus are essential UI components for selecting a single value from multiple options. It is a dynamic content popup that shows a list of items within. It saves space on screen because a single item contains multiple data. In Kotlin Compose Multiplatform, we will be using ExposedDropdownMenuBox and ExposedDropdownMenu with the combination of TextField to creating beautiful material style drop down menu.

Start coding:

1. Creating a custom variable options to store drop-down menu items.

2. Creating a State named expanded to detect whether the drop-down menu is open or closed state.

3. Creating a State named selectedOption to set the default item on app startup, then to hold the drop-down selected item.

4. Creating ExposedDropdownMenuBox component. This is our main drop-down menu container.

expanded: This is the expanded state, which controls the drop-down open and close state.

5. Creating TextField component. It is the main component that shows on the screen when the drop-down menu is closed.

Code explanation:

1. value = selectedOption – Sets the current text shown in the field (i.e., selected dropdown item).
2. onValueChange = {} – Disabled input typing as it’s a dropdown, not editable by the user directly.
3. modifier = Modifier.fillMaxWidth() – Makes the text field take the full width of its parent.
4. readOnly = true – Prevents user from editing text; used to trigger dropdown only.
5. label = { Text(…) } – Displays a label above the field for a contextual hint (e.g., “Select item”).
6. trailingIcon = { Icon(…) } – Shows dropdown arrow icon and rotates based on expanded state.
7. colors = ExposedDropdownMenuDefaults.textFieldColors(…) – Customizes text, background, and indicator colors.
8. singleLine = true – Ensures only a single line of text appears in the field.
9. shape = RoundedCornerShape(8.dp) – Applies rounded corners with 8dp radius for visual styling.

6. Creating ExposedDropdownMenu component. 

Code explanation:

1. ExposedDropdownMenu – A Composable that displays a dropdown list anchored to a text field.
2. expanded = expanded – Controls whether the dropdown is visible (true) or hidden (false).
3. onDismissRequest = { expanded = false } – Hides the dropdown when clicked outside or dismissed.
4. modifier = Modifier.fillMaxWidth().background(Color.White) – Sets full width and white background for the dropdown.
5. options.forEachIndexed { index, option -> … } – Loops through each item with its index to display as dropdown options.
6. DropdownMenuItem – A clickable item in the dropdown list.
7. onClick = { selectedOption = option; expanded = false } – Sets selected item and collapses the dropdown on click.
8. Text – Displays the dropdown option’s text.
9. style = TextStyle(fontSize = 16.sp, color = Color(0xff263238)) – Sets font size to 16sp and text color to dark gray.
10. if (index < options.lastIndex) { Divider(…) } – Adds a light gray line between items except after the last one.
11. Divider – Visual separator line between dropdown items.
12. color = Color.LightGray – Sets divider line color.
13. thickness = 1.dp – Sets the divider’s thickness.
14. modifier = Modifier.padding(horizontal = 8.dp) – Adds horizontal padding around the divider.

Complete source code of App.kt file:

Screenshot on an Android device:

Screenshot on an iOS device: