Skip to content
iPhone Duo SupportGet help

Prepare your toolbars for vertical layout

MajorNeeds iOS 27.1 SDKnavigation

What you see

Toolbar labels truncate, custom bar views render sideways or clipped, or too many items collapse into an overflow menu.

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:

.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:

.axisBehavior(.verticalPreferred)   // orient vertically when the bar is vertical
.axisBehavior(.horizontalOnly)      // keep horizontal regardless
// UIKit
item.axisBehavior = .verticalPreferred

Adapting custom views

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

@Environment(\.toolbarVerticalEdge) private var edge
// 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:

.toolbarVerticalBehavior(.disabled)
// 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.

← All checksGet help with this