# Dropdown Menu

### 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="/files/LyDk100PkWdOwcgcKjyD" media="(prefers-color-scheme: dark)"><img src="/files/w6AkcMZdiOzCdFJkCVwJ" 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="/files/pOxNPRW6LlKPhGbEgVFR" media="(prefers-color-scheme: dark)"><img src="/files/86VDF8MZOTTvPxg5A9i9" 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="/files/LyDk100PkWdOwcgcKjyD" media="(prefers-color-scheme: dark)"><img src="/files/w6AkcMZdiOzCdFJkCVwJ" 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://swift-packages.gitbook.io/materialuikit/components/dropdown-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.