iPhone Duo Vertical Toolbar: How Bars Move to the Edge

Rebuild your app with the iOS 27.1 SDK, run it on iPhone Duo, and the navigation bar and toolbar are no longer at the top and bottom. They now sit in a column along one side of the screen. This iPhone Duo vertical toolbar, which Apple calls the vertical bar, is the biggest visual change most apps get on the new device, and most of it happens automatically.

Automatic doesn't mean free. A vertical bar is narrow, it has a fixed width, and it shares its edge with system UI. This guide covers when bars go vertical, how to prepare your items, how to control overflow and ordering, and when to opt out. It's based on Apple's Raise the bar with iPhone Duo Tech Talk, Apple's documentation and posts by iOS developer @sarunw. These APIs are new in iOS 27.0 and 27.1, and details can change between releases.

What is the vertical bar on iPhone Duo?

The vertical bar is a single strip along one side edge that holds everything that used to be split between the top and bottom of the screen. As @sarunw puts it, it brings together Live Activities, status information, and navigation and toolbar items, which "all share the space along one edge."

Apple describes it as navigation, toolbar and tab bar controls sharing one region that is rotated 90 degrees into a vertical stack. The status bar changes axis to match, and Blake Crosley's notes on Apple's design talk describe the Dynamic Island expanding vertically as Live Activities arrive. Apple's documentation says that when the bar appears or disappears, content reflows and a leading or trailing safe area inset for the bar is added or removed. That's why horizontal safe area insets and content margins matter so much on this device.

You opt in by building with the latest SDK. Apple's Prepare your app for iPhone Duo talk says that with the iOS 27.1 SDK, standard navigation and toolbar buttons lay out vertically under the status bar.

When does a toolbar go vertical on iPhone Duo?

Whether you see a vertical bar depends on the display, the orientation and where your container sits.

The rule behind the split view rows is simple: a bar only goes vertical when its container sits along the display edge. As @sarunw notes, the split view detail column gets one and other columns stay horizontal. Apple's Tech Talk adds that sheets placed with preferredPlacement get a vertical bar on the right side but not on the left. The inner display reports the same size classes in portrait and landscape, so the bar is one of the few things that changes when you rotate it. Our guide to iPhone Duo size classes covers the rest.

Which containers count? In SwiftUI, Apple pairs the toolbar modifier with NavigationStack or NavigationSplitView. In UIKit, prefer UINavigationController and UITabBarController, which manage their own bars.

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Share", systemImage: "square.and.arrow.up") { share() }
            }
        }
}

Nothing in this sample is iPhone Duo specific. Built with the iOS 27.1 SDK, the bottom-bar item moves to the vertical bar where the context allows it.

Why does the vertical bar favor symbols over titles?

A horizontal bar has a fixed height and can grow as wide as its labels need. A vertical bar flips that: Apple describes a fixed width and flexible item height. A long title has nowhere to go, so the bar favors symbol-only items.

You don't pick a separate representation for each layout. You give every item an icon and a title, and the system chooses. Per Apple's Tech Talk, items with an icon go vertical and text-only items stay horizontal, while overflow menus show both title and icon. That's why @sarunw's shortcut works: "Give toolbar items both icon/title and you are probably ready for iPhone Duo." Always provide the title, even for a symbol-only item, because the system uses it in overflow menus and expanded forms.

Custom views need more care. @sarunw points out that a custom panel showing an icon and a title works horizontally, but on a vertical bar the titles must be hidden or the panel gets squeezed into the fixed width. Apple's toolbarVerticalEdge environment value tells a custom view when it's in that context:

struct FilterPanel: View {
    @Environment(\.toolbarVerticalEdge) private var toolbarVerticalEdge

    var body: some View {
        if toolbarVerticalEdge == nil {
            Label("Filters", systemImage: "line.3.horizontal.decrease")
        } else {
            Image(systemName: "line.3.horizontal.decrease")
                .accessibilityLabel("Filters")
        }
    }
}

The value is a HorizontalEdge? and is new in iOS 27.1. Apple documents it as the system's preferred edge for the vertical bar "regardless of whether a vertical bar is currently visible," and nil where no vertical bar is ever used. In UIKit, read traitCollection.verticalBarEdge, which returns an unspecified value in those contexts.

Some items should never go vertical. A cart button that shows a price carries information in its text. Apple's Tech Talk shows an axisBehavior modifier for these, with .horizontalOnly and .verticalPreferred as the values named on screen.

How do I control overflow with visibilityPriority?

The vertical bar runs out of room sooner than a horizontal one, especially on the outer display in landscape, or when the keyboard or Picture in Picture competes for space. When that happens, items move into an overflow menu. By default, Apple says, items overflow from bottom to top.

To keep an important item visible, raise its priority with .visibilityPriority, which Apple documents for iOS 27.0. Lower-priority items move into overflow first.

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button("Archive", systemImage: "archivebox") { archive() }
    }
    ToolbarItem(placement: .bottomBar) {
        Button("Compose", systemImage: "square.and.pencil") { compose() }
    }
    .visibilityPriority(.high)
}

In this sample, Archive goes to overflow before Compose. UIKit uses the same idea with item.visibilityPriority = .high, per the Tech Talk. Apple suggests setting priorities on groups first and then on items within them. It also suggests keeping frequent actions like Compose, and badged or status items, visible longest.

If you have your own "more" menu, fold it into the system one. Apple shows ToolbarOverflowMenu in SwiftUI and navigationItem.additionalOverflowItems in UIKit, and asks you to reserve the ellipsis symbol for overflow. When a tab bar and a toolbar compete, toolbarVerticalCompressionBehavior(_:) in SwiftUI and verticalBarCompressionBehavior in UIKit decide which one compresses first. By default, the toolbar does.

How do I pin Done and order items with topBarPinnedTrailing?

Order matters in a vertical bar because the top is the easiest place to find. Apple's guidance is to reserve the top for primary navigation, such as Back or Close, followed by prominent actions like Done. Navigation controllers add Back automatically. For a custom Close button in SwiftUI, Apple uses ToolbarItem(placement: .cancellationAction).

For the prominent action, use .topBarPinnedTrailing. Apple documents it as available from iOS 27.0, and @sarunw notes that it keeps the item near the top of the vertical bar.

.toolbar {
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", systemImage: "xmark") { dismiss() }
    }
    ToolbarItem(placement: .topBarPinnedTrailing) {
        Button("Done", systemImage: "checkmark") { save() }
    }
}

Pinned items are sticky: Apple's documentation says they "only move to the overflow menu when search is active and there isn't enough room." The UIKit equivalent from the Tech Talk is navigationItem.pinnedTrailingGroup, set to a UIBarButtonItemGroup.

How do I opt out of the vertical bar on iPhone Duo?

Not every app needs a vertical bar. Apple's example is Calculator, a single-page, bottom-heavy layout where horizontal space is valuable. Its documentation also names a full-screen video player with toolbar controls. For those, SwiftUI's toolbarVerticalBehavior(_:), new in iOS 27.1, falls back to the standard horizontal top and bottom bars.

NavigationStack {
    CalculatorView()
        .toolbarVerticalBehavior(.disabled)
}

final class CalculatorViewController: UIViewController {
    override var preferredVerticalBarBehavior: UIVerticalBarBehavior {
        .disabled
    }
}

The first sample is SwiftUI, the second UIKit. Both are from Apple's Tech Talk and documentation, and both default to automatic. In SwiftUI the behavior is resolved by the container: a NavigationStack uses its topmost view, a TabView the selected tab and a NavigationSplitView the trailing-most column.

Apple asks you to treat this as a stable choice. Don't toggle it as users navigate or as a single view's state changes. If you only want to hide bars on one screen, use toolbarVisibility(_:for:) instead. And note one developer report on Apple's forums of an item briefly appearing in the vertical bar during a full-screen dismissal despite .disabled, so test transitions.

Why don't custom toolbars or RTL layouts move the bar?

Two behaviors surprise developers. First, custom bars stay put. @sarunw notes that if you build your own UIToolbar, UINavigationBar or UITabBar, iPhone Duo won't move those items: "The system only moves bars it owns." Apple's Tech Talk says the same and recommends system-managed containers. If you keep a custom bar, position it yourself using verticalBarEdge or toolbarVerticalEdge plus safe area insets.

Second, right-to-left languages don't flip the bar. The vertical bar follows the hardware, not the reading direction, and stays on the same side of the device in RTL; your content adapts around it. Don't mirror custom UI based on layout direction alone. Read the edge the system reports.

A few smaller details from Apple's talk: vertical bars have no scroll-edge effect by default, they gain a background when Reduce Transparency is on, and flexible spacers collapse to zero on the vertical axis. Don't add extra spacing for either orientation.

Key takeaways

• Rebuild with the iOS 27.1 SDK and system bars go vertical on the outer display and in inner-display landscape. Inner-display portrait stays horizontal.
• Only bars along the display edge go vertical: the split view detail column gets one, other columns don't.
• Give every item an icon and a title, since the bar's fixed width favors symbols.
• Use .visibilityPriority(.high) for actions that must survive overflow and .topBarPinnedTrailing for Done.
• Opt out with .toolbarVerticalBehavior(.disabled) or preferredVerticalBarBehavior only for layouts like a calculator or video player.
• Custom UIToolbar and UINavigationBar instances don't move, and the bar ignores RTL; read toolbarVerticalEdge or verticalBarEdge instead.

Once your bars are in order, line content up with the new edge in our guide to iPhone Duo safe areas and content margins, then work through the full iPhone Duo preparation checklist. For apps that already make the most of the device, see Built for the fold.