Raise the Bar: Vertical Bars on iPhone Duo

Source: Raise the bar with iPhone Duo (Apple Developer) · 15 min

By Anna (UI Frameworks) and Maria (HID).

On iPhone Duo, bars move to the side. The whole premise of the device: the wide display has plenty of horizontal space but precious vertical space, so controls that used to sit top-and-bottom now live in a vertical column on the edge — where they're also thumb-reachable.

One sentence summary from Apple: it's the same components, just adapted to a different layout. This session is the field guide to getting them right.

Opt in: it's mostly automatic

1. Rebuild against the latest SDKs.
2. Use bars from navigation containers — toolbar paired with a NavigationStack/NavigationSplitView (SwiftUI) or a UINavigationController/UITabBarController (UIKit). Don't build custom toolbars — items in a hand-rolled UIToolbar, UINavigationBar, or UITabBar won't be considered for the vertical layout.

When it does move, navigation bar + toolbar + tab bar content share one vertical stack (imagine rotating your bar 90°): Notes has a toolbar, Clock a tab bar, Fitness both. In split views only the detail column participates (others stay horizontal), and inspectors don't get their own bar.

Prefer symbols; let the system pick the representation

Vertical bars favor symbol-only items (fixed width, flexible height).

• The system automatically chooses between icon, text, or icon+title based on context — you keep supplying the same content (an icon and a title, even for image-only items). Right choices: back/close at top, prominent actions (Done) pinned, remaining items grouped with a spacer. Use topBarPinnedTrailing/pinnedTrailingGroup for prominent actions; cancellationAction (or custom leading item) for back/close.
• Control which axis via the new AxisBehavior API:
• Items that toggle symbol↔text (like Edit) stay horizontal automatically for system items; for custom ones use horizontalOnly.
• Custom/compound views go horizontal by default; set verticalPreferred if they support a vertical representation (e.g. a compass view).
• Minimize title-only items and text+image custom views. Prefer converting to symbols — e.g. replace an inline count with the iOS 26 badge API for a system-standard look.
• Judgment call: if text just reinforces the symbol, the symbol alone works vertically. If the text carries standalone info (a cart showing a dollar total), keep it horizontal.
• Read the toolbarVerticalEdge environment/trait (nil when not vertical) to adapt custom views — e.g. an action panel that hides titles and gets shorter when vertical.
• Keyboard accessory bars stay horizontal; don't move them. Fixed spacers keep their size; flexible spacers collapse to zero vertically (don't add your own spacing).

Manage the overflow menu

Less vertical space = items overflow more often (and when the keyboard or PiP appear). Two decisions:

1. Tab bar vs. toolbar. Which survives compression first?

• Navigation-focused (Podcasts): toolbar compresses first (default).
• Task-focused (Games): tab bar compresses first.

Configure per view via toolbar compression behavior.

1. Item priority. Consolidate your app's own overflow into a single system-managed menu (ToolbarOverflowMenu in SwiftUI, additionalOverflowItems in UIKit). Keep the ellipsis (…) as your only overflow symbol. Then set visibility priority per item (high/low/custom) — items collapse bottom-to-top by default. After the individual items, items that show important status (badges) and frequently-used actions (Compose, New Note) should go to overflow last.

When vertical is optional

Most apps are good candidates, but you can disable vertical bars (toolbarVerticalBehavior / preferredVerticalBar):

• Single-page, bottom-heavy apps (Calculator) — a horizontal bar may let content expand fully.
• Control-light sheets (one button, like Close) — the vertical bar just eats space.

Get ready

1. Build with the latest SDKs.
2. Audit bars → ensure they're owned by navigation containers.
3. Update custom items to be vertically-capable (or mark them horizontal-only).
4. Assign overflow priorities so the system adapts gracefully.

Bars on the side is the visual signature of iPhone Duo — get them right and your app looks native on day one.