---
title: "iPhone Duo: where your GoodBarber app's bars go"
description: "On iPhone Duo, your GoodBarber app's bars move into a rail along the camera, in your colors: all it takes is a rebuild of your iOS app."
canonical_url: "https://www.goodbarber.com/blog/iphone-duo-where-your-app-s-bars-go-a1671/"
lang: en
date: 2026-11-12
last_updated: 2026-11-12
---

# iPhone Duo: where your app's bars go

On iPhone Duo, Apple gathers the controls into a column along the camera. The system builds that rail only for its own bars: for a GoodBarber app's bars, it had to be designed. One width, icons only, capsules in your app's colors: your users keep their bearings, and all you have to do is rebuild.

![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg)

[Lesia PIETRI](https://www.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design

[Select **GoodBarber** as yourPreferred news sourceSelect **GoodBarber** as your](https://www.google.com/preferences/source?q=goodbarber.com)

Nov 12, 2026 · 5 min read

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98656938-68861156.jpg?v=1794301545.4212244)

The outer display of iPhone Duo is wider and shorter than an iPhone's. Apple drew a simple rule from it: the navigation bar, the tab bar and buttons leave the top and bottom of the screen for a column on the side, alongside the status bar and the camera. The height goes back to the content, and the controls stay within reach. Apple calls this column “vertical controls.”

Yet the system only moves its own bars. A GoodBarber app's bars come from its design system, and the system leaves them where the app put them. So the question was a design question first: what becomes of a TabBar when it turns from a row into a column, and how does an app stay recognizable in such a narrow strip? The rail had to stay the app, not turn into an Apple bar.

## iPhone Duo closed: a rail along the camera

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98656938-68861157.jpg?v=1794302165.5250366)

The first design call for GoodBarber apps: a single width for everything that goes into the iPhone Duo rail, the width of a shortcut, with its icon centered. Back, search, favorites and every TabBar tab fit the same slot, and the column reads in one stroke. The rail carries icons only; their names don't disappear, VoiceOver reads them. On Eastside, the demo app of a music school, the column stays calm and leaves the notices' colors up front.

The second call is Apple's: what was at the top stays at the top, what was at the bottom stays at the bottom. Back and the shortcuts open the column, the TabBar closes it. Anyone who knows the app on their phone has nothing to relearn: their map of the app is the same, it has simply turned.

## Turn the phone, and the rail changes sides

[A closed iPhone Duo turns one way, then the other: the rail follows the camera, the icons stay upright.](https://player.vimeo.com/video/1245376868?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1)

Held in landscape, a closed iPhone Duo takes its rail along with the camera: on the right one way, on the left the other. The icons stay upright, and the content settles around them. That side belongs to the device: an app in Arabic or Hebrew keeps its rail against the camera.

Up close, it's a detail; in use, it's what makes the gesture feel natural. What you notice in an interface is what resists the gesture. A rail that follows the device fades from view, and that is exactly what we ask of it.

## iPhone Duo open: the rail in landscape, the bars in portrait

[An open iPhone Duo turns from landscape to portrait: the bars leave the rail and return to the top and bottom.](https://player.vimeo.com/video/1245376869?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1)

Open in landscape, the inner display of iPhone Duo keeps the rail; turned to portrait, it's the only pose where the bars return to the top and bottom. On Tweed & Cheviot, the demo app of a natural history society, search and favorites move back up into the navigation bar, and the TabBar returns to the bottom.

The switch could be disorienting, and order is what prevents it: what opened the rail opens the bar, and the tabs keep their sequence. You find a control by its place among the others far more than by the edge it hangs on.

In portrait, the navigation bar also stays put as you scroll. If it hid, the text would slide under the clock, tucked into the corner of the screen. As long as the landmarks hold, the screen can change shape as much as it likes.

## In an article, the rail keeps only the reading tools

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98656938-68861160.jpg?v=1794301952.8717654)

In an article, a GoodBarber app on iPhone Duo keeps only what serves the text. The TabBar steps aside, as it does on the phone whenever a screen has a back button; back moves up alone to the top of the rail, and one capsule at the bottom gathers the reader's tools: comment, share, enlarge the text, save for later. Actions that belong together share a capsule. When the article opens, the rail's capsules cross-fade at the pace of the incoming page: the rail follows navigation in a single movement.

The header photo, for its part, runs up to the top of the screen and passes under the rail. The icons of a transparent bar are often light, made to sit on an image; without a background, they would end up white on a white page. So each capsule keeps a background, neither pure white nor pure black, but a softened tone tinted with the color of its icons, with the contrast accessibility calls for. The right contrast rather than the strongest: a nuanced background is more refined.

## Your app's bars, in your colors

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98656938-68861161.jpg?v=1794301550.2732558)

In a GoodBarber app, every bar is drawn by the app: it carries its own colors and its own shape, and the rail keeps them. Each capsule takes the background of the bar it comes from. Its shape follows that of your [TabBar](https://www.goodbarber.com/blog/tabbar-here-comes-a-new-generation-a1497/), from square corners to the pill, on every screen of the app, including those where the TabBar doesn't appear. Side by side, the rails of Eastside, Tweed & Cheviot and The Current don't speak the same visual language, and that's the point.

GoodBarber's engine does the rest. It asks the system for the space of a bar on that side, which already clears the camera, and places the capsules there in the screen's order. The rail follows the design you already have, with no setting to add.

## What's left for you to do: rebuild your iOS app

![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98656938-68861162.jpg?v=1794301551.373263)

In the back office, “Rebuild & submit” rebuilds your iOS app with the rail; the update reaches your users once it's published, after App Store review. Nothing to redesign, nothing to set. Your Android app, your PWA and your iPad app stay as they are.

To see the rail move, open and close iPhone Duo on [our iPhone Duo page](https://www.goodbarber.com/iphone-duo/?utm_campaign=iphone-duo). What changes for your app, from one display to the other, is in [our launch article](https://www.goodbarber.com/blog/iphone-duo-the-foldable-iphone-what-changes-for-your-app/). Apple's rules and their sources are gathered on the DuoApps pages [Where the bars go](https://duoapps.com/patterns/where-the-bars-go/) and [Custom bars](https://duoapps.com/patterns/custom-bars/). And if you don't have an app yet, [create yours](https://www.goodbarber.com/create/?utm_campaign=iphone-duo).

Follow GoodBarber on Google

[![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=goodbarber.com)

![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg)

About the author

Lesia PIETRI

Head of Product Design

I'm Head of Product Design at GoodBarber. I lead the design of the product: the design system every app is built on, the layouts you start from, and the flow that takes you from an idea to a published app. My job is that someone who has never opened a design tool still ships an app that looks considered, screen after screen. A designer at heart, I spend my days on the details nobody names: spacing, contrast, the weight of a title. I write here about design at GoodBarber, and about what's new in the product: the features, the layouts, and the themes.

[More from Lesia](https://www.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)