TechnologiesSwiftUI

MenuStyle protocol

iOSmacOStvOSwatchOSvisionOS✓ renders

A type that applies standard interaction behavior and a custom appearance

How it works

MenuStyle is a protocol that defines the appearance and interaction behavior of menus within a view hierarchy. Rather than configuring each Menu individually, you adopt a menu style to describe how a menu's label and its content should be presented, then apply it once so every affected menu shares a consistent look. Reach for MenuStyle when you want a menu to read as a button, a borderless control, or a custom presentation, and when you want that decision to cascade to all menus in a subtree.

  1. Apply a style with menuStyle(_:)

    The menuStyle(_:) modifier sets the MenuStyle for menus within the view it's attached to. Applying it to a menu, or to any ancestor, propagates the style down through the hierarchy. Here .menuStyle(.button) is attached directly to the Menu("Options"), giving that menu a button-like presentation.

  2. Choose a built-in style value

    SwiftUI ships concrete MenuStyle values you can pass to the modifier, including .button for a button-styled menu and .automatic for the context-appropriate default. The example selects .button, which renders the Menu as a tappable button whose label is the title "Options".

  3. Style the menu's label and content together

    A MenuStyle governs the menu as a whole: the visible label that the user activates and the list of choices it reveals. The chosen style shapes how the Menu("Options") control looks and how its Button("Rename"), Button("Duplicate"), and destructive Button("Delete") entries are presented when the menu opens.

  4. Conform a type to MenuStyle for custom appearances

    To go beyond the built-in values, declare a type conforming to MenuStyle and implement makeBody(configuration:), using the supplied configuration to lay out the menu's label and content. You then expose it through a static extension so it reads like .button does at the call site, and pass that value to .menuStyle(_:) exactly as the example passes .button.

Try it — Change .menuStyle(.button) to .menuStyle(.automatic) to see how the same Menu("Options") shifts from a button-styled control to the platform's default menu presentation.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

MenuStyle.swift
struct MenuStyleDemo: View {
    var body: some View {
        Menu("Options") {
            Button("Rename") {}
            Button("Duplicate") {}
            Button("Delete", role: .destructive) {}
        }
        .menuStyle(.button)
        .padding()
    }
}
Live preview
Options
Options
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →