iPhone Duo SwiftUI layouts

Explore interactive SwiftUI previews across every available orientation and hinge state.

15elements

Toolbars

Prefer Vertical Toolbar Items

A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized.

SwiftUI code

Full details Docs

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") {}
}

Compatibility

iOS 27.1+ iPadOS 27.1+

Found an issue or have a suggestion?

All variants

Every available iPhone Duo screenshot for Prefer Vertical Toolbar Items.

6 views