# Prepare your toolbars for vertical layout

> On the inner display in landscape, navigation, toolbar and tab bar controls move to a shared vertical region at the side of the screen.

Source: https://iphoneduosupport.com/checklist/vertical-toolbar-adoption/

Severity: major
Category: navigation
Applies to: swiftui, uikit
Requires: ios-27.1 SDK
Symptom: Toolbar labels truncate, custom bar views render sideways or clipped, or too many items collapse into an overflow menu.
Sources: https://developer.apple.com/videos/play/tech-talks/111462/
Last verified: 2026-09-09

---

Building against the iOS 27.1 SDK changes how bars are laid out on the inner display: navigation, toolbar, and tab bar controls share a single **vertical** region, preserving vertical space for content. Picture your existing bars rotated ninety degrees into a column.

## What you get automatically

Standard containers participate without code changes. Use `UINavigationController` and `UITabBarController`, or their SwiftUI equivalents, and the system handles placement. Custom `UIToolbar` content is not considered for this treatment.

The bar stays on the same side in right-to-left languages, and in a split view only the detail column participates.

## Controlling placement

Order matters in a vertical bar. Put navigation at the top and prominent actions at the bottom:

```swift
.toolbar {
    // Top of the vertical bar
    ToolbarItem(placement: .cancellationAction) { CloseButton() }

    // Pinned to the trailing edge
    ToolbarItem(placement: .topBarPinnedTrailing) { ShareButton() }
}
```

Some items read badly rotated. `axisBehavior` decides:

```swift
.axisBehavior(.verticalPreferred)   // orient vertically when the bar is vertical
.axisBehavior(.horizontalOnly)      // keep horizontal regardless
```

```swift
// UIKit
item.axisBehavior = .verticalPreferred
```

## Adapting custom views

If you draw your own bar content, detect the vertical case and lay out accordingly:

```swift
@Environment(\.toolbarVerticalEdge) private var edge
```

```swift
// UIKit
switch traitCollection.verticalBarEdge { … }
```

Apple's content advice is to prefer **symbol-only items** and to minimise text-only or custom dual-content views, since a column has far less room for a label than a row does.

## Opting out

Not every screen benefits. Apple names single-page layouts with heavy bottom content, such as a calculator, and sheets with only a close button:

```swift
.toolbarVerticalBehavior(.disabled)
```

```swift
// UIKit
override var preferredVerticalBarBehavior: UIVerticalBarBehavior { .disabled }
```

Opt out deliberately, per screen — not globally to avoid doing the work.

## How to verify

Open the inner display in landscape and audit every screen's bar. Check that labels are readable, that custom views are not clipped, and that the items you consider essential are visible rather than buried in overflow.

---

Published by iPhone Duo Support (https://iphoneduosupport.com). Not affiliated with Apple Inc.