Customizing Toolbars (SwiftUI)

The iOS 16 toolbar API adds visibility, background, color scheme, title menus, and user-customizable editor toolbars, all as declarative modifiers scoped to a specific bar.

Visibility, Background, and Color Scheme

toolbar(_:for:) hides or shows any bar SwiftUI owns: the navigation bar, the tab bar, or the bottom bar. toolbarBackground controls only the bar's background, which gives the image-under-a-translucent-bar effect. toolbarColorScheme pins the bar to a scheme independent of the view hierarchy.

ScrollView {
  Image("beach")
    .resizable()
    .scaledToFit()
}
.ignoresSafeArea(.container, edges: .top)
.navigationTitle("Hello")
.toolbar(.hidden, for: .navigationBar)
.toolbarBackground(.hidden, for: .navigationBar)
.toolbarColorScheme(.dark, for: .navigationBar)

Title Menu

toolbarTitleMenu puts a small arrow on the navigation title; tapping it opens a menu. The article pairs it with a date picker in a medium-detent sheet.

Text(date, style: .date)
  .navigationTitle(Text(date, style: .date))
  .navigationBarTitleDisplayMode(.inline)
  .toolbarTitleMenu {
    Button("Pick another date") { datePickerShown = true }
  }
  .sheet(isPresented: $datePickerShown) {
    DatePicker("Choose date", selection: $date, displayedComponents: .date)
      .datePickerStyle(.graphical)
      .presentationDetents([.medium])
  }

Editor Role and Customizable Items

toolbarRole(.editor) (iPadOS 16) centers the items and lets the user add or remove secondary ones. Give each customizable item a stable id: SwiftUI persists the user's setup under those identifiers, so changing an id discards their configuration.

.toolbar {
  ToolbarItem(placement: .primaryAction) {
    Button("Primary action") {}
  }
  ToolbarItem(id: "copy", placement: .secondaryAction, showsByDefault: true) {
    Button("copy") {}
  }
  ToolbarItem(id: "delete", placement: .secondaryAction, showsByDefault: false) {
    Button("delete") {}
  }
}
.toolbarRole(.editor)

Secondary Actions Collapse Automatically

Items placed with .secondaryAction collapse into one overflow menu item when space runs out, no manual menu building needed.

.toolbar {
  ToolbarItem(placement: .primaryAction) { Button("Primary action") {} }
  ToolbarItem(placement: .secondaryAction) { Button("Secondary action 1") {} }
  ToolbarItem(placement: .secondaryAction) { Button("Secondary action 2") {} }
}