Prefer Vertical Toolbar Items
A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized.
Platform Compatibility
Tags
SwiftUI Code
TabView {
Tab("A", systemImage: "a.square") {
NavigationStack {
Text("FooBar")
.toolbar {
ToolbarItem {
Button("1", systemImage: "1.circle", action: action)
}
ToolbarItem {
Button("2", systemImage: "2.circle", action: action)
}
ToolbarItem {
Button("3", systemImage: "3.circle", action: action)
}
ToolbarItem {
Button("4", systemImage: "4.circle", action: action)
}
ToolbarItem {
Button("5", systemImage: "5.circle", action: action)
}
}
.toolbarVerticalCompressionBehavior(.prefersToolbarItems)
}
}
Tab("B", systemImage: "b.square") {}
Tab("C", systemImage: "c.square") {}
Tab("D", systemImage: "d.square") {}
Tab("E", systemImage: "e.square") {}
Tab("F", systemImage: "f.square") {}
}Found an issue or have a suggestion?
More Toolbars Components
View all
Toolbar Overflow Menu
The overflow menu of a toolbar. An overflow menu represents actions that are always placed in the toolbar’s overflow menu, regardless of the toolbar mode, platform, or customizability.
Pinned Toolbar Item Placement
A placement that pins the item to the trailing edge of the toolbar.
ToolbarItem Shared Background Visibility
Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping
Explore Other Components
Browse all
Toolbar Vertical Edge
This value reflects the system’s preferred edge for the vertical bar in the current context, regardless of whether a vertical bar is currently visible. Use it to position custom bars or other UI relative to the system’s bar placement.
Custom Placeholder Async URL Image
Loads and displays a modifiable image from the specified URL load request using a custom placeholder until the image loads.
Boolean Sheet
Presents a sheet when a binding to a Boolean value that you provide is true. On watchOS, sheets are displayed as fullScreenCover.
