Skip to content

Taking Control of Toolbar Items (SwiftUI)

A SwiftUI guide for coding agents. Also covers visibilitypriority toolbar, toolbaroverflowmenu, topbarpinnedtrailing, toolbarminimizebehavior, toolbar collapse control, which toolbar items collapse.

The toolbar API adapts per platform, and by default you cannot predict which items collapse into the overflow menu on iOS. Four newer APIs make that explicit: visibilityPriority, ToolbarOverflowMenu, the topBarPinnedTrailing placement, and toolbarMinimizeBehavior.

Rank items with visibilityPriority

The same toolbar renders all items on macOS but collapses some on iOS. visibilityPriority on any ToolbarContent, with automatic, low, or high, tells SwiftUI which items to keep when space runs out.

.toolbar {
  ToolbarItemGroup(placement: .primaryAction) {
    Button("Action 1") {}
  }
  .visibilityPriority(.high)

  ToolbarItemGroup {
    Button("Action 2") {}
    Button("Action 3") {}
    Button("Action 4") {}
    Button("Action 5") {}
  }
}

Collapse on purpose with ToolbarOverflowMenu

ToolbarOverflowMenu is a group that is collapsed by default on every platform. Use it when a set of actions belongs in the overflow menu by design, instead of letting the system pick.

.toolbar {
  ToolbarItemGroup(placement: .primaryAction) {
    Button("Action 1") {}
  }
  ToolbarOverflowMenu {
    Button("Action 2") {}
    Button("Action 3") {}
  }
}

Pin an item with topBarPinnedTrailing

The topBarPinnedTrailing placement keeps an item at the trailing edge of the top bar. It only collapses when active search leaves no room.

ToolbarItemGroup(placement: .topBarPinnedTrailing) {
  Button("Action 1") {}
}

Minimize bars on scroll

toolbarMinimizeBehavior shrinks a bar while the user scrolls, and it applies to navigation, tab, bottom, and window bars.

NavigationStack { /* content and toolbar */ }
  .toolbarMinimizeBehavior(.onScrollDown, for: .navigationBar)

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-swiftui-guide({ topic: "swiftui-taking-control-of-toolbar-items" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems