How do you add custom actions to the toolbar title menu?

Navigation Title Menu

We’ve seen how you can rename the navigation title by passing a binding to .navigationTitle. That gives you a drop-down menu from the toolbar with a single rename action:

How do we add other actions to that drop-down menu?

Toolbar Title Menus

Here’s my toolbar setup from the earlier example with save and cancel buttons:

.toolbar {
  ToolbarItem(placement: .primaryAction) {
    Button("Save") { ... }
  }
  ToolbarItem(placement: .cancellationAction) {
      Button("Cancel", role: .cancel) { ... }
  }
}

You can add a title menu with your own custom actions by adding the ToolbarTitleMenu to the toolbar:

.toolbar {
  ToolbarItem(placement: .primaryAction) { ... }
  ToolbarItem(placement: .cancellationAction) { ... }

  ToolbarTitleMenu {
    FavButton()
    ClearButton()
  }
}

On iOS and iPadOS that gives you a menu that drops-down from the navigation title in the toolbar:

Note though that I’ve lost the ability to rename the title. To get the rename action back you need to include the RenameButton in the list of buttons in the toolbar title menu:

ToolbarTitleMenu {
  FavButton()
  RenameButton()
  ClearButton()
}

That gives me back the rename action together with my custom actions:

Documentation Bugs

A word or warning if you’re watching the WWDC22 video SwiftUI on iPad: Add toolbars, titles, and more. That video shows a, now out-of-date, code snippet for adding actions to the title menu:

PlaceDetailContent(place: $place)
  // toolbar customizations ...
  .navigationTitle(place.name) {
    MyPrintButton()
    RenameButton
 }

Apple removed that method of passing the menu actions in a closure to the navigation title modifier during the iOS 16 betas. I don’t expect Apple to change WWDC videos. Unfortunately, the documentation for the RenameButton still has a similar example (FB11944833).