---
title: Dropdown Menu
description: Anchored menus for selections, overflow actions, and contextual commands.
---

Use dropdown menus for compact action lists that open from a trigger.

<UiDemo id="dropdown-menu" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/DropdownMenu.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Overflow menu

<UiDemo id="dropdown-menu-toolbar" />

## API Reference

### DropdownMenu

An anchored dropdown menu with a trigger and floating panel.

```kotlin
@Composable
fun DropdownMenu(
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    side: DropdownMenuSide = DropdownMenuSide.Bottom,
    alignment: DropdownMenuAlignment = DropdownMenuAlignment.Start,
    sideOffset: Dp = 4.dp,
    alignmentOffset: Dp = 0.dp,
    panel: @Composable DropdownMenuScope.() -> Unit,
    anchor: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `expanded` | `Boolean` | Whether the dropdown menu is currently open. |
| `onExpandedChange` | `(Boolean) -> Unit` | Called when the dropdown menu should open or close. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `side` | `DropdownMenuSide` | Side of the anchor where the menu panel should appear. |
| `alignment` | `DropdownMenuAlignment` | Alignment of the menu panel along the chosen side. |
| `sideOffset` | `Dp` | Distance between the menu panel and its anchor. |
| `alignmentOffset` | `Dp` | Offset applied along the anchor edge. |
| `panel` | `@Composable DropdownMenuScope.() -> Unit` | Composable menu panel content displayed by the dropdown. |
| `anchor` | `@Composable () -> Unit` | Composable anchor that opens the dropdown menu. |

### DropdownMenuPanel

A styled dropdown panel surface.

```kotlin
@Composable
fun DropdownMenuScope.DropdownMenuPanel(
    modifier: Modifier = Modifier,
    shape: Shape = Theme[shapes][menuShape],
    backgroundColor: Color = Theme[colors][panelColor],
    contentColor: Color = Theme[colors][onPanelColor],
    shadow: Shadow = Theme[shadows][raisedShadow],
    minWidth: Dp = 160.dp,
    maxWidth: Dp = 320.dp,
    enter: EnterTransition? = null,
    exit: ExitTransition? = null,
    content: @Composable DropdownMenuPanelContentScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `shape` | `Shape` | Shape used for the dropdown panel. |
| `backgroundColor` | `Color` | Background color used for the menu panel. |
| `contentColor` | `Color` | Color used for menu content. |
| `shadow` | `Shadow` | Shadow applied to the menu panel. |
| `minWidth` | `Dp` | Minimum width used for the menu panel. |
| `maxWidth` | `Dp` | Maximum width used for the menu panel. |
| `enter` | `EnterTransition?` | Transition used when the menu panel appears. |
| `exit` | `ExitTransition?` | Transition used when the menu panel disappears. |
| `content` | `@Composable DropdownMenuPanelContentScope.() -> Unit` | Composable content displayed by the component. |

### DropdownMenuItem

A selectable action inside a dropdown menu.

```kotlin
@Composable
fun DropdownMenuPanelContentScope.DropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    closeOnClick: Boolean = true,
    style: DropdownMenuItemStyle = DropdownMenuItemStyle.Default,
    leading: (@Composable () -> Unit)? = null,
    trailing: (@Composable () -> Unit)? = null,
    content: @Composable RowScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `onClick` | `() -> Unit` | Called when the menu item is selected. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `enabled` | `Boolean` | Whether the item can be interacted with. |
| `closeOnClick` | `Boolean` | Whether clicking the item should close the menu. |
| `style` | `DropdownMenuItemStyle` | Visual style used by the menu item. |
| `leading` | `(@Composable () -> Unit)?` | Optional leading content shown before the menu item label. |
| `trailing` | `(@Composable () -> Unit)?` | Optional trailing content shown after the menu item label. |
| `content` | `@Composable RowScope.() -> Unit` | Composable content displayed by the component. |

### DropdownMenuLabel

A non-interactive label row for grouping menu items.

```kotlin
@Composable
fun DropdownMenuPanelContentScope.DropdownMenuLabel(
    modifier: Modifier = Modifier,
    contentColor: Color = Theme[colors][mutedColor],
    content: @Composable RowScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `contentColor` | `Color` | Color used for menu content. |
| `content` | `@Composable RowScope.() -> Unit` | Composable content displayed by the component. |

### DropdownMenuSeparator

A visual separator between menu groups.

```kotlin
@Composable
fun DropdownMenuPanelContentScope.DropdownMenuSeparator(
    modifier: Modifier = Modifier,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |

### DropdownMenuSide

Side options for menu placement relative to its anchor.

```kotlin
@JvmInline
value class DropdownMenuSide internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Top` | Places the menu above its anchor. |
| `Bottom` | Places the menu below its anchor. |
| `Start` | Places the menu before its anchor in the layout direction. |
| `End` | Places the menu after its anchor in the layout direction. |

### DropdownMenuAlignment

Alignment options for menu placement along the anchor edge.

```kotlin
@JvmInline
value class DropdownMenuAlignment internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Start` | Aligns the panel to the start edge of the anchor. |
| `Center` | Centers the panel against the anchor. |
| `End` | Aligns the panel to the end edge of the anchor. |

### DropdownMenuItemStyle

Visual style variants for dropdown menu items.

```kotlin
@JvmInline
value class DropdownMenuItemStyle internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Default` | Uses the default menu item colors. |
| `Destructive` | Uses destructive emphasis for dangerous actions. |