---
title: "Prefer Vertical Toolbar Items | Explore SwiftUI"
description: "A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized"
canonical_url: "https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items"
meta:
  author: "Explore SwiftUI"
  "og:description": "A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized"
  "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Prefer%2BVertical%2BToolbar%2BItems%2Cdescription_~QSBjb21wcmVzc2lvbiBiZWhhdmlvciB0aGF0IHByaW9yaXRpemVzIGtlZXBpbmcgdG9vbGJhciBpdGVtcyB2aXNpYmxlIG92ZXIgb3RoZXIgZWxlbWVudHMsIHN1Y2ggYXMgdGFicy4gQnkgZGVmYXVsdCwgdGFicyBhcmUgcHJpb3JpdGl6ZWQu%2Ccategory_Toolbars%2Cimage_~L2FwaS9pbWFnZXMvMjQ4L3ZhcmlhbnRzLzE3NDk~dj0xNzkwNDE5ODY3MTA1JnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogNXB4IDBweCAwcHggNDdweDsgYm9yZGVyOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLXJpZ2h0OiAwOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIl19%2Cp_Ii9saWJyYXJ5L3Rvb2xiYXJzL3ByZWZlci12ZXJ0aWNhbC10b29sYmFyLWl0ZW1zIg%2Cs_iuRI1jRMAmpF0OG_.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Prefer Vertical Toolbar Items | Explore SwiftUI"
  "twitter:description": "A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized"
  "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Prefer%2BVertical%2BToolbar%2BItems%2Cdescription_~QSBjb21wcmVzc2lvbiBiZWhhdmlvciB0aGF0IHByaW9yaXRpemVzIGtlZXBpbmcgdG9vbGJhciBpdGVtcyB2aXNpYmxlIG92ZXIgb3RoZXIgZWxlbWVudHMsIHN1Y2ggYXMgdGFicy4gQnkgZGVmYXVsdCwgdGFicyBhcmUgcHJpb3JpdGl6ZWQu%2Ccategory_Toolbars%2Cimage_~L2FwaS9pbWFnZXMvMjQ4L3ZhcmlhbnRzLzE3NDk~dj0xNzkwNDE5ODY3MTA1JnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogNXB4IDBweCAwcHggNDdweDsgYm9yZGVyOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLXJpZ2h0OiAwOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIl19%2Cp_Ii9saWJyYXJ5L3Rvb2xiYXJzL3ByZWZlci12ZXJ0aWNhbC10b29sYmFyLWl0ZW1zIg%2Cs_iuRI1jRMAmpF0OG_.png"
  "twitter:title": "Prefer Vertical Toolbar Items | Explore SwiftUI"
---

> Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt)

**Interactive previews**[ iPhone Duo](https://exploreswiftui.com/duo?element=248)

# **Prefer Vertical Toolbar Items**

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

![Prefer Vertical Toolbar Items - Preview Not Available](https://exploreswiftui.com/api/images/248/variants/1749?v=1790419867105&r=2&w=800&q=80&f=webp)

### **Platform Compatibility**

iOS 27.1+ iPadOS 27.1+

### **Tags**

### **SwiftUI Code**

[ Docs](https://developer.apple.com/documentation/swiftui/toolbarverticalcompressionbehavior/preferstoolbaritems?changes=_3_14)

```
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?**

Created: September 26, 2026Updated: September 26, 2026

![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png)

**Connect Wizard**

**Unlock insights App Store Connect doesn’t show you.**

[** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8)

### **More Toolbars Components **

[**View all **](https://exploreswiftui.com/library/toolbars)

![Axis Behavior - iOS on iPhone Duo - Landscape - Closed - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/247/variants/1692?v=1790586402346&r=2&w=412&q=75&f=webp)

### **Axis Behavior**

The bar axis behavior of the toolbar item.

![Toolbar Item Visibility Priority - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/238/variants/733?v=1792389091475&r=2&w=412&q=75&f=webp)

### **Toolbar Item Visibility Priority**

Defines the visibility priority for a toolbar item.

![Toolbar Overflow Menu - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/237/variants/731?v=1790073478842&r=2&w=412&q=75&f=webp)

### **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 - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/236/variants/527?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Pinned Toolbar Item Placement**

A placement that pins the item to the trailing edge of the toolbar.

![Remove Toolbar Item Margin - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/235/variants/665?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Remove Toolbar Item Margin**

Configures whether the content margins are removed.

![Title Toolbar Item Placement - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/95/variants/279?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Title Toolbar Item Placement**

Places content in the title area

![ToolbarItem Shared Background Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/92/variants/295?v=1790073478842&r=2&w=412&q=75&f=webp)

### **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

![ToolbarSpacer - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/82/variants/106?v=1790073478842&r=2&w=412&q=75&f=webp)

### **ToolbarSpacer**

A standard space item in toolbars

### **Explore Other Components **

[**Browse all **](https://exploreswiftui.com/)

![List Badge Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/124/variants/353?v=1790073478842&r=2&w=412&q=75&f=webp)

### **List Badge Prominence**

Specifies the prominence of badges created by this view.

![Button Roles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/33/variants/718?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Button Roles**

A value that describes the purpose of a button.

![Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/31/variants/339?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Button Styles**

A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy

![EllipticalListStyle - watchOS - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/103/variants/327?v=1790073478842&r=2&w=412&q=75&f=webp)

### **EllipticalListStyle**

The list style that describes the behavior and appearance of an elliptical list.

![WheelDatePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/63/variants/73?v=1790073478842&r=2&w=412&q=75&f=webp)

### **WheelDatePickerStyle**

A date picker style that displays each component as columns in a scrollable wheel

![GroupBox - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/27/variants/199?v=1790073478842&r=2&w=412&q=75&f=webp)

### **GroupBox**

A simple GroupBox

![EditButton - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/36/variants/239?v=1790073478842&r=2&w=412&q=75&f=webp)

### **EditButton**

A button that toggles the edit mode environment value

![Role Button With Default Label - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/134/variants/424?v=1790073478842&r=2&w=412&q=75&f=webp)

### **Role Button With Default Label**

Creates a button that displays a default label.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#webpage","@type":"WebPage","dateModified":"2026-09-26T10:51:07.171Z","datePublished":"2026-09-26T10:45:31.908Z","description":"A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized","name":"Prefer Vertical Toolbar Items","url":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items","breadcrumb":{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#article","dateModified":"2026-09-26T10:51:07.171Z","datePublished":"2026-09-26T10:45:31.908Z","description":"A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized","headline":"Prefer Vertical Toolbar Items","inLanguage":"en-US","name":"Prefer Vertical Toolbar Items","thumbnailUrl":"https://exploreswiftui.com/api/images/248/variants/1749?v=1790419867105&r=2","url":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/toolbarverticalcompressionbehavior/preferstoolbaritems?changes=_3_14","codeSampleType":"full example","description":"A compression behavior that prioritizes keeping toolbar items visible over other elements, such as tabs. By default, tabs are prioritized","name":"Prefer Vertical Toolbar Items SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"TabView {\n    Tab(\"A\", systemImage: \"a.square\") {\n        NavigationStack {\n            Text(\"FooBar\")\n                .toolbar {\n                    ToolbarItem {\n                        Button(\"1\", systemImage: \"1.circle\", action: action)\n                    }\n                    ToolbarItem {\n                        Button(\"2\", systemImage: \"2.circle\", action: action)\n                    }\n                    ToolbarItem {\n                        Button(\"3\", systemImage: \"3.circle\", action: action)\n                    }\n                    ToolbarItem {\n                        Button(\"4\", systemImage: \"4.circle\", action: action)\n                    }\n                    ToolbarItem {\n                        Button(\"5\", systemImage: \"5.circle\", action: action)\n                    }\n                }\n                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)\n            }\n        }\n    Tab(\"B\", systemImage: \"b.square\") {}\n    Tab(\"C\", systemImage: \"c.square\") {}\n    Tab(\"D\", systemImage: \"d.square\") {}\n    Tab(\"E\", systemImage: \"e.square\") {}\n    Tab(\"F\", systemImage: \"f.square\") {}\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Toolbars"},{"@type":"Thing","name":"Prefer Vertical Toolbar Items"}]},{"@id":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Toolbars","item":"https://exploreswiftui.com/library/toolbars","position":2},{"@type":"ListItem","name":"Prefer Vertical Toolbar Items","item":"https://exploreswiftui.com/library/toolbars/prefer-vertical-toolbar-items","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/248/variants/1749?v=1790419867105&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/248/variants/1749?v=1790419867105&r=2"}]}
```