Where toolbars and tab bars go on iPhone Duo

Bars move to the side on their own under two conditions: the app is built with the latest version of Xcode, and its bars come from the system’s navigation containers (navigation stack, tab view, split view). A toolbar, navigation bar, or tab bar that the app draws itself stays where the app puts it: the system doesn’t move it (see If your app draws its own bars).

Apple“Raise the bar”, 1:59 · “Raise the bar”, 2:36 · Developer article, Optimize bars for vertical presentation

The toolbar, the tab bar, and navigation buttons move to the side in three cases: the outer display in portrait, the outer display in landscape, and the inner display in landscape. Only the inner display in portrait keeps horizontal bars, at the top and bottom.

AppleHIG, Vertical controls · “Raise the bar”, 0:47 · “Design for iPhone Duo”, 5:27

From one pose to the next, keep controls in the same positions relative to each other, so no one has to relearn where actions live.

AppleHIG, Vertical controls · “Raise the bar”, 5:41

The side follows the hardware, not the language: on the outer display, controls hold their position relative to the camera, and they don’t switch sides in right-to-left languages. In Split View, when two apps share the inner display, each one places its controls along its outer edge: the app on the left has them on the left.

AppleHIG, Vertical controls · “Raise the bar”, 4:18 · “Design for iPhone Duo”, 3:07

Don’t assume which side the controls are on: they can be on the left, in landscape and in Split View. Treat each side of the safe area separately, without assuming that opposite sides have the same margin, so that no control, on either edge, covers your content.

Apple“Prepare your app”, 7:12 · “Prepare your app”, 7:25 · “Prepare your app”, 8:04 · HIG, Vertical controls

On the side, your controls share the space with system elements: the status bar, and the Dynamic Island, which grows when Live Activities arrive. When space runs short, the system moves some of your controls into the overflow menu; which one compresses first, the toolbar or the tab bar, is set by the app, screen by screen (see the checklist, Form · Bars).

AppleHIG, Vertical controls · “Design for iPhone Duo”, 1:34 · “Design for iPhone Duo”, 5:36

The system arranges items in the standard order, from top to bottom: navigation buttons, like Back or Close, then the prominent action, like Done, then the remaining buttons in their original groups. What was in the top bar goes at the top and what was in the bottom bar goes at the bottom, with a space between the two; the tab bar stays at the bottom. Keep this order.

AppleHIG, Vertical controls · “Raise the bar”, 4:36 · “Design for iPhone Duo”, 6:04 · “Design for iPhone Duo”, 6:15

Keep a control near the content it affects. In a split view (list and detail), only the detail column, the one along the edge of the screen, gets the vertical bar; the other columns keep horizontal bars, like the controls for the list in Mail, which stay above the list. An inspector, the pane that details the selected item, also keeps horizontal bars.

AppleHIG, Vertical controls · “Raise the bar”, 3:36 · Developer article, Optimize bars for vertical presentation

On the outer display, a sheet’s toolbar moves to the side. On the inner display, a sheet is centered by default and keeps horizontal bars; if the app places it on the right, it gets a vertical bar; on the left, it doesn’t.

Apple“Raise the bar”, 3:58 · “Raise the bar”, 4:03 · “Raise the bar”, 4:09 · Developer article, Optimize bars for vertical presentation

In general, keep the default bar placement. Apple names two cases where an app can turn off the vertical bar. The first: a single-page, visual app that doesn’t scroll and has a bottom-heavy layout, like Calculator, when a horizontal layout lets the content use the full width without running into the Dynamic Island or the status bar. The second: a sheet whose toolbar has only one button, like Close, so the bar doesn’t take up space.

AppleHIG, Vertical controls · “Raise the bar”, 14:28 · “Raise the bar”, 14:37 · “Design for iPhone Duo”, 8:51