{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreial7t4lfi7kmdacxs7tghdz37v2chgbzhql6ol5slxml3gbmyuyiy",
    "uri": "at://did:plc:e7ehpd5hzctp5oq7dlfbz6e5/app.bsky.feed.post/3ml7yvrjvrt72"
  },
  "path": "/posts/make-swiftui-toolbar-customizable/",
  "publishedAt": "2026-05-06T16:59:28.000Z",
  "site": "https://swiftdevjournal.com",
  "tags": [
    "@ToolbarContentBuilder"
  ],
  "textContent": "By _customizable_ I mean letting the people using your app add, remove, and move toolbar items. Making a customizable toolbar in a SwiftUI app requires you to do the following:\n\n  * Give the `.toolbar` modifier an ID\n  * Give each toolbar item an ID\n\n\n\nThe following code creates toolbar items in a customizable toolbar to push and pull version control changes to a remote repository:\n\n\n    .toolbar(id: \"mainToolbar\") {\n      ToolbarItem(id: \"push\") {\n        Button(\n          action: {\n            // Push the changes\n          },\n          label: {\n            Label(\"Push\", systemImage: \"square.and.arrow.up\")\n          }\n        ).accessibilityLabel(\"Push Changes\")\n    }\n\n      ToolbarItem(id: \"pull\") {\n        Button(\n          action: {\n            // Pull the changes\n          },\n          label: {\n            Label(\"Pull\", systemImage: \"square.and.arrow.down\")\n          }\n        ).accessibilityLabel(\"Pull Changes\")\n      }\n    }\n\n\n## Creating toolbar items outside the .toolbar modifier\n\nIf your toolbar has many items, moving the toolbar item creation code out of the `.toolbar` modifier makes the toolbar code cleaner. If your toolbar creation code is outside the `.toolbar` modifier, the variable or function must conform to the `CustomizableToolbarContent` protocol for the toolbar to be customizable.\n\nThe following code places the toolbar item creation code in its own variable:\n\n\n    @ToolbarContentBuilder\n      private var toolbarContent: some CustomizableToolbarContent {\n        ToolbarItem(id: \"push\") {\n          Button(\n            action: {\n              // Push the changes\n            },\n            label: {\n              Label(\"Push\", systemImage: \"square.and.arrow.up\")\n            }\n          ).accessibilityLabel(\"Push Changes\")\n        }\n\n      ToolbarItem(id: \"pull\") {\n        Button(\n          action: {\n            // Pull the changes\n          },\n          label: {\n            Label(\"Pull\", systemImage: \"square.and.arrow.down\")\n          }\n        ).accessibilityLabel(\"Pull Changes\")\n      }\n\n    }\n\n    .toolbar(id: \"mainToolbar\") {\n      toolbarContent\n    }\n\n\n## Toolbar item groups\n\nSwiftUI includes a `ToolbarItemGroup` struct that lets you create a group of toolbar items without wrapping each item in a `ToolbarItem` block. Unfortunately `ToolbarItemGroup` does not conform to `CustomizableToolbarContent` so you can’t use `ToolbarItemGroup` in a customizable toolbar. You must create the toolbar items using `ToolbarItem`.\n\n## Adding toolbar-related menu items to the View menu\n\nYou can add menu items to the View menu to hide/show the toolbar and customize the toolbar by adding the `ToolbarCommands` struct to the `.commands` modifier in the App struct.\n\n\n    .commands {\n      ToolbarCommands()\n    }\n",
  "title": "Make a SwiftUI Toolbar Customizable"
}