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
Vertical bars are the Regular-width adaptation of standard tab bars: a sidebar along the side of the screen instead of a bottom bar — the same behavior iPad already uses in landscape.
This applies automatically to Duo's wider poses when you use the system components correctly.
When they appear
Tab bars typically become vertical once the app crosses into Regular width — on Duo, that usually means fully unfolded — and the system handles the switch; you do not detect it yourself.
- Use standard
TabViewwith.automatic, orUITabBarControllerconfigured for adaptive presentation — the bar becomes vertical for free. - Expect the change in Regular width; do not branch on device model.
- Reimplement the adaptation with
horizontalSizeClassonly if you ship a custom tab bar.
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 build a custom tab bar, you must reimplement the vertical adaptation yourself: switch on horizontalSizeClass, match system icon and label sizing, 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.