iPhone Duo Vertical Bars Guide
How toolbars and tab bars should adapt to vertical bar layouts on iPhone Duo in Regular width.
Last updated
Quick answer
In Regular width, standard TabView and UITabBarController components switch automatically from a bottom bar to a vertical sidebar arrangement — the same adaptation already used on iPad in landscape. Use the system components and this happens for free; a custom tab bar has to reimplement it manually.
What are vertical bars
In Regular width, standard UIKit and SwiftUI tab bars can adopt a vertical arrangement along the side of the screen instead of the traditional bottom bar. This is the same adaptation already used on iPad in landscape, and it applies automatically to Duo's wider poses when you use the system components correctly.
When they appear
TabView with the default .automatic tab view style switches to a vertical sidebar-style presentation once your app has enough width — which on Duo typically happens when fully unfolded. You don't need to detect this yourself; it's handled by the system as long as you're using the standard components.
Apple recommendation
Use TabView and NavigationSplitView from SwiftUI, or UITabBarController configured for adaptive presentation in UIKit, rather than building a custom tab bar. Custom bars need to reimplement this adaptation manually.
Building for them
If you must build a custom bar, mirror the system behavior: switch to a vertical arrangement based on horizontalSizeClass, keep icon and label sizing consistent with the system style, and test the transition live as the device folds and unfolds.
Frequently asked questions
Do I need to build vertical bars myself?
No, not if you use standard components. TabView with the default automatic style, or UITabBarController configured for adaptive presentation, switches to a vertical sidebar layout on its own once your app has enough width.
When do tab bars become vertical on iPhone Duo?
This typically happens once the app crosses into Regular width, which on Duo usually means fully unfolded. The switch is handled by the system automatically — you do not need to detect it.
What happens if I build a custom tab bar?
You'll need to reimplement this adaptation yourself: switch to a vertical arrangement based on horizontalSizeClass, match the system's icon and label sizing, and test the transition live as the device folds and unfolds.