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.

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

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

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.

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

Parameters

Parameter	Description
label	The view used as the label for the dropdown menu.
content	The view representing the content of the dropdown menu.
titleKey	A string representing the title of the menu button (when Label is Text).
isActive	A binding that controls whether the menu is active.

Example

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

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")
}

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

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

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

@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")
      }
   }
}

For better UI consistency, use DropdownMenuLabel to create a row cells in a DropdownMenu. For more information, refer to Dropdown Menu Label.