SwiftUI - Menu Bar

---

---

A menubar is a UI element which appears at the top of an application window or can display various options or commands in a list format. Each menubar has its menu, which contains various actions, tasks or buttons.

For example, a menu includes File, Edit, Find, View, etc. SwiftUI does not provide any pre-defined modifier or method to create a menubar. Also, menubar is only supported by macOS 13+, other than macOS, no other Apple platform, such as iOS, iPad, watchOS, etc., supports Menubar.

Creating MenuBar in SwiftUI

In SwiftUI, we can create menubar with the help of MenuBarExtra() method. This method creates a menubar extra with a key that is used as a label. It defines the primary scene of an app. We can also add images and system images in the menu bar. The output of the menubarExtra will display in the actual macOS, not in the simulator.

Syntax

Following is the syntax −

MenuBar(_titleKey: String,
content: ()->Content)

Parameters

Following parameters are used by this view −

• titleKey: Represent the purpose of the item.

• content: A view which displays the elements on the screen.

Example

The following SwiftUI program creates menubar.

import SwiftUI
@main
struct MyApp: App {
   var body: some Scene {      
      WindowGroup {
         ContentView()
      }      
      // Menu Bar Item
      MenuBarExtra("MyData", systemImage: "star.fill") {
         Button("Open") {
            print("Open Window clicked")
         }
         Button("File") {
            print("Settings clicked")
         }
         Button("Project") {
            print("Settings clicked")
         }
         Button("Settings") {
            print("Settings clicked")
         }
         Divider()
         Button("Quit") {
            NSApplication.shared.terminate(nil)
         }
      }
   }
}    

Output

Styling menuBarExtra in SwiftUI

In SwiftUI, we can style menuBarExtra with the help of menuBarExtraStyle() modifier. This modifier provides various styles to style the menubar created by the specified scene. By default, it is style in .automatic, but we can style the menu in .menu and .window.

Syntax

Following is the syntax −

func menuBarExtraStyle(_ style: S) -> some Scene

Example

The following SwiftUI program is used to style menubar.

import SwiftUI
@main
struct MyApp: App {
   var body: some Scene {      
      WindowGroup {
         ContentView()
      }      
      // Menu Bar Item
      MenuBarExtra("MyData", systemImage: "star.fill") {
         Button("Open") {
            print("Open Window clicked")
         }
         Button("File") {
            print("Settings clicked")
         }
         Button("Project") {
            print("Settings clicked")
         }
         Button("Settings") {
            print("Settings clicked")
         }
         Divider()
         Button("Quit") {
            NSApplication.shared.terminate(nil)
         }
      }.menuBarExtraStyle(.automatic)
   }
}

Output