DuoApps

All patterns

If your app draws its own bars

Apple first asks you to use the bars that the system’s navigation containers provide: on iPhone Duo, they’re the only ones that move to the side on their own. If your app draws its own, keep them clear of the reserved regions, treat each side of the safe area separately, place them on the side where the system puts its own, and manage the overflow menu yourself.

RecommendationLast checked October 2, 2026

The problem

A bar the app draws itself, set below the camera’s reserved region, its items grouped in a capsule, its overflow menu at the end.

On the outer display, and on the inner display in landscape, the system moves the toolbar, the tab bar, and navigation buttons to the side (Apple’s vertical controls). Its bars keep clear of the camera and the status bar on their own, and move their items into the overflow menu when space runs short.

A bar the app draws gets none of this, whether it comes from a cross-platform framework, a no-code tool, a web view, or a game: it stays where the app puts it. Avoiding the camera and the fold, following the system’s side, giving up space when the keyboard appears: all of that is up to the app.

The rules

  1. 1

    If you can, build the app with the latest version of Xcode and use the bars that the system’s navigation containers provide: those are the ones the system moves to the side. A toolbar, navigation bar, or tab bar that the app draws itself, even from the system’s bar components, stays where the app puts it: the system doesn’t move it (see Where the bars go, rule 1).

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

  2. 2

    If you can’t use the system bars, rely on reserved regions, which apps can read starting in iOS 27.1 and which Apple calls “a great option for building your own custom bars.” They mark the outer camera, always present, the inner camera when it’s active, and the fold when the device is partially folded; keeping your bar clear of them is up to your app.

    Apple“Prepare your app”, 8:08 · “Prepare your app”, 8:31 · HIG, Reserved regions · Developer article, Adapt to reserved regions in your views

  3. 3

    Like any app, treat each side of the safe area separately, without assuming that opposite sides have the same margin: the controls the system places on the side can be on the left, in landscape and in Split View, when two apps share the inner display (see Where the bars go, rule 5).

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

  4. 4

    Don’t pick a side for your bar: use the system’s, which follows the hardware, not the language, and, in Split View, the app’s outer edge (see Where the bars go, rule 4). Apple doesn’t say how an app without system bars knows that side. Our inference, which Apple doesn’t state: outside Split View, it’s the side of the status bar and the Dynamic Island, which the system stacks with the app’s controls.

    RecommendationApple sources: HIG, Vertical controls · “Raise the bar”, 4:18 · “Design for iPhone Duo”, 1:34

  5. 5

    Take on what the system does for its own bars: move items into a single overflow menu when space runs short, including when the keyboard is open, and show a background when Reduce Transparency is on. A bar you place on the keyboard stays attached to it, as Apple asks for the keyboard’s accessory bar, which doesn’t move to the side (see the checklist, Form · Safe area and backgrounds).

    RecommendationApple sources: “Raise the bar”, 11:39 · “Raise the bar”, 12:36 · “Raise the bar”, 10:57 · “Raise the bar”, 10:00

  6. 6

    Plan for the available height to shrink: on the outer display, the camera’s region grows with the Dynamic Island when Live Activities arrive, and landscape leaves less height. Decide in advance what moves into the overflow menu and what gets minimized, as the system does for its bars: by default, items overflow from bottom to top, and frequently used actions and items with badges stay visible the longest. On a screen where people complete a task, you can have the tab bar compress before the toolbar, as an app can set for system bars (see the checklist, Form · Bars).

    RecommendationApple sources: HIG, Reserved regions · “Design for iPhone Duo”, 5:36 · “Raise the bar”, 11:39 · HIG, Vertical controls · “Raise the bar”, 13:23 · “Raise the bar”, 13:54

  7. 7

    In a vertical bar you draw, group related items on a shared capsule-shaped background, without spacing them by hand: on the vertical axis, the system sets its flexible spacers to zero, and Apple asks you to group items rather than space them out.

    RecommendationApple sources: “Raise the bar”, 11:07 · “Raise the bar”, 11:16 · HIG, Vertical controls

  8. 8

    Give your vertical bar a fixed width and its items a flexible height, as the system does for its own. Stack the items without rotating the bar: every symbol stays upright.

    RecommendationApple sources: “Raise the bar”, 6:03 · “Raise the bar”, 10:06

Demo

A generic app that draws its own vertical bar, following the rules on this page, with the device closed, in landscape: the tightest pose. The dotted line shows the height the bar has. Pick a situation: the bar does what the system does for its own.
Static version, no JavaScript
  1. 9:41
    9:41

    At rest. At rest: the bar runs along the edge, below the camera’s reserved region, which the app reads (rule 2). The back button, then the actions grouped in a capsule; a fixed width, symbols upright (rules 7 and 8).

  2. 9:41
    9:41

    Live Activity. A Live Activity stretches the Dynamic Island: the reserved region grows and the bar loses height. Two actions and “⋯” remain: the others have moved into the overflow menu, from bottom to top, and the action with a badge has stayed (rule 6).

  3. 9:41
    9:41

    Keyboard open. Keyboard open: the height shrinks again, and only “⋯” remains. The bar the app places on the keyboard stays attached to it, horizontal (rule 5).

  4. 9:41
    9:41

    Reduce Transparency. Reduce Transparency is on: the capsules get a solid background, like the system bars, and the list no longer shows through (rule 5).

  5. 9:41
    9:41

    Split View, on the left. Split View, with the app on the left of the inner display: its bar moves to its outer edge, on the left, like the system controls. Apple doesn’t say how an app without system bars knows that side: this is our inference (rule 4).

FAQ

On iPhone Duo, does a bar drawn by a cross-platform framework move to the side?

Only if the framework relies on the system’s navigation containers and the app is built with the latest version of Xcode. A bar that the app or its framework draws itself stays where the app puts it, even when it’s built from the system’s bar components.

How do I keep a custom bar clear of the camera on iPhone Duo?

Place it outside the reserved regions, which apps can read starting in iOS 27.1 and which Apple suggests for bars an app draws itself. The outer camera’s region is always present, and it grows with the Dynamic Island when Live Activities arrive.

On iPhone Duo, which side should a custom vertical bar go on?

The side where the system puts its own: it follows the hardware, not the language, and it can be the left, in landscape and in Split View. Outside Split View, it’s the side of the status bar and the Dynamic Island; in Split View, the app’s outer edge (a DuoApps inference, which Apple doesn’t state).

Should items in a vertical bar have text on iPhone Duo?

No: in a vertical bar, the system shows only each item’s icon, and a text-only item stays horizontal (Apple’s developer article). Do the same, but give every item a title: it shows in the overflow menu.

Does a game or a full-screen app need bars on the side on iPhone Duo?

Not necessarily: Apple allows the full width for a visual, immersive interface that doesn’t scroll, like Calculator, as long as nothing runs into the Dynamic Island or the status bar. Elsewhere, Apple asks you to keep the default bar placement: put your own bars on the system’s side (a DuoApps recommendation).

Sources

  1. Raise the bar with iPhone Duo, Apple Developer, Tech Talk
  2. Preparing your app for iPhone Duo, Apple Developer Documentation
  3. Prepare your app for iPhone Duo, Apple Developer, Tech Talk
  4. Designing for iPhone Duo, Apple Human Interface Guidelines, September 9, 2026
  5. Design for iPhone Duo, Apple Developer, Tech Talk