> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/dropdown-menu.md).

# Dropdown Menu

Represents a Material UI styled dropdown menu for selecting items from a list.

### Overview

The `DropdownMenu` presents a Material UI styled dropdown with a customizable label and content. It toggles visibility based on user interaction or an active state binding, providing a smooth transition with overlay effects.

To use `DropdownMenu`, initialize it with either custom content and label views or a title-based label and content closure.

### Initializers

Creates a dropdown menu with custom content and label views.

```swift
DropdownMenu(
    @ViewBuilder content: () -> Content,
    @ViewBuilder label: () -> Label
)
```

Create a dropdown menu with a title-based label and custom content.

```swift
DropdownMenu(
    _ titleKey: S,
    @ViewBuilder content: () -> Content
) where Label == Text, S : StringProtocol
```

Creates a dropdown menu with a binding to control its activation state, along with custom content and label views.

```swift
DropdownMenu(
    isActive: Binding<Bool>,
    @ViewBuilder content: () -> Content,
    @ViewBuilder label: () -> Label
)
```

### Parameters

<table><thead><tr><th width="185">Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>label</code></td><td>The view used as the label for the dropdown menu.</td></tr><tr><td><code>content</code></td><td>The view representing the content of the dropdown menu.</td></tr><tr><td><code>titleKey</code></td><td>A string representing the title of the menu button (when <code>Label</code> is <code>Text</code>).</td></tr><tr><td><code>isActive</code></td><td>A binding that controls whether the menu is active.</td></tr></tbody></table>

### Example

Displays a dropdown menu with custom content and a custom label.

```swift
DropdownMenu {
   DropdownMenuLabel(systemImage: "1.circle.fill", "Option 1")
   DropdownMenuLabel(systemImage: "2.circle.fill", "Option 2")
   DropdownMenuLabel(systemImage: "3.circle.fill", "Option 3") 
} label: {
   Image(systemName: "ellipsis.circle.fill")
}
```

<figure><picture><source srcset="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2Fh26nvO2dEJXpxM9P01hI%2FDrop%20menu%20custom%20dark.png?alt=media&amp;token=a75c1841-2566-4813-ab7e-4c1bb33d300c" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FCZq6kbBH8e3Nom37wpUo%2FDrop%20menu%20custom%20light.png?alt=media&amp;token=1f41584d-f68e-4a85-b3d5-280dbcb16bf7" alt=""></picture><figcaption></figcaption></figure>

Displays a dropdown menu with a title-based label and custom content.

```swift
DropdownMenu("Options") {
   DropdownMenuLabel(systemImage: "1.circle.fill", "Option 1")
   DropdownMenuLabel(systemImage: "2.circle.fill", "Option 2")
   DropdownMenuLabel(systemImage: "3.circle.fill", "Option 3") 
}
```

<figure><picture><source srcset="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2F3HC2BVKjIgY1JJelmTUx%2FDefault%20Dropdown%20dark.png?alt=media&amp;token=060a455d-cd4b-4bce-a2e0-75db26e65948" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FfENZkbLhgrPnGkmyPUAU%2FDefault%20Dropdown%20Light.png?alt=media&amp;token=a243a9a0-4459-4b60-8332-522665ec23bf" alt=""></picture><figcaption></figcaption></figure>

Displays a dropdown menu with a custom label, custom content, and a binding to control its activation state.

```swift
@State private var isMenuActive: Bool = false

var body: some View {
   Container {
      ActionButton("Show Menu") { isMenuActive.toggle() }
      
      DropdownMenu(isActive: $isMenuActive) {
         DropdownMenuLabel(systemImage: "1.circle.fill", "Option 1")
         DropdownMenuLabel(systemImage: "2.circle.fill", "Option 2")
         DropdownMenuLabel(systemImage: "3.circle.fill", "Option 3") 
      } label: {
         Image(systemName: "ellipsis.circle.fill")
      }
   }
}
```

<figure><picture><source srcset="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2Fh26nvO2dEJXpxM9P01hI%2FDrop%20menu%20custom%20dark.png?alt=media&amp;token=a75c1841-2566-4813-ab7e-4c1bb33d300c" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FCZq6kbBH8e3Nom37wpUo%2FDrop%20menu%20custom%20light.png?alt=media&amp;token=1f41584d-f68e-4a85-b3d5-280dbcb16bf7" alt=""></picture><figcaption></figcaption></figure>

> For better UI consistency, use `DropdownMenuLabel` to create a row cells in a `DropdownMenu`. For more information, refer to [Dropdown Menu Label](/materialuikit/components/dropdown-menu/dropdown-menu-label.md).