What compresses first on iPhone Duo: the toolbar or the tab bar

Plan for some of your controls to leave the bar. On the side, they share the height with the status bar and with the Dynamic Island, which grows when Live Activities arrive. Space runs short more often on the outer display in landscape, simply because there’s less height, and also when other interface elements appear, like the keyboard, or Picture in Picture when the device is open in portrait. The system then moves controls into the overflow menu on its own.

AppleHIG, Vertical controls · “Design for iPhone Duo”, 1:34 · “Design for iPhone Duo”, 5:36 · “Raise the bar”, 11:39

Choose, screen by screen, which stays visible longer: the toolbar or the tab bar. On a screen people browse (a navigation-focused experience, in Apple’s words), like a view in Podcasts, the toolbar compresses first: its items move into the overflow menu, and the tab bar stays whole, so the app’s primary destinations remain within reach. That’s the default behavior: nothing to set.

AppleHIG, Vertical controls · “Raise the bar”, 11:39 · “Raise the bar”, 12:03 · “Raise the bar”, 12:12

On a screen where people finish a task (a task-oriented experience), like a view in the Games app, have the tab bar compress first. It shrinks to a single control, as the tab bar minimizes on other iPhone models, and the toolbar actions people need to finish the task stay visible. That isn’t the default behavior: the app asks for it on that screen, and the system applies it.

AppleHIG, Vertical controls · “Raise the bar”, 12:14

To decide, ask what people come to the screen to do. If they browse and move between destinations, as in a list, a grid, or a block-based home screen, keep the tab bar. If they come to finish something, as in a form, or a cart on its way to checkout, keep the actions and let the tab bar shrink. Apple defines the two experiences and gives one example of each; matching them to screen types is ours, the same split as in the checklist of Don’t stretch.

RecommendationApple sources: HIG, Vertical controls · “Raise the bar”, 12:03 · “Raise the bar”, 12:14

Then order the toolbar. When the tab bar keeps its place, or the toolbar needs more room than there is, its items move into the overflow menu one by one: by default, from the bottom up. To change that order, the app gives items a visibility priority, high, low, or custom, first to whole groups, then, if needed, to single items within a group. So group related items instead of spacing them by hand: the system’s groups adapt as the available space changes.

AppleHIG, Vertical controls · Developer article, Organize items in your bars · “Raise the bar”, 13:09 · “Raise the bar”, 13:23 · “Raise the bar”, 13:36 · “Raise the bar”, 13:40

Keep the actions people use most visible the longest, like Compose in Mail or New Note in Notes. Keep items that show a status visible longer too, like an item with a badge, so people can see it at a glance.

AppleHIG, Vertical controls · “Raise the bar”, 13:54

Have a single overflow menu, the system’s. If your app already has its own, move its actions into the system’s, so people find everything in one place; the app can also put items in it directly. Keep the ellipsis (three dots) for that menu, and give any other menu a symbol of its own. In the overflow menu, the system shows each item with its title and its symbol: give every item a title, even one people only see as a symbol (Symbols, not labels, rule 1).

AppleHIG, Vertical controls · Developer article, Organize items in your bars · “Raise the bar”, 6:32 · “Raise the bar”, 12:36 · “Raise the bar”, 12:50 · “Raise the bar”, 12:57

Compressing isn’t removing. An action that leaves the bar stays within reach in the overflow menu. From one pose to the next, give access to the same controls and the same content, however people hold the device.

AppleHIG, Best practices · “Design for iPhone Duo”, 5:03