DuoApps

All patterns

Symbols, not labels: bar items on iPhone Duo

On iPhone Duo, a bar item moves to the side as a symbol alone: a text-only item or a segmented control stays horizontal, and so does a view the app draws itself, unless the app declares that it can go vertical. Give every item a symbol and a title, turn a count into a badge, and keep horizontal only the items whose text carries information, like the amount on a cart button.

RecommendationLast checked October 8, 2026

The problem

iPhone Duo closed, in portrait: the items with a symbol move into the column on the side, a count becomes a badge; the text button and the segmented control stay in a bar at the top.

Even when an app’s bars come from a system container and move to the side (Where the bars go, rule 1), each item follows its own rule. A horizontal bar has a fixed height and items of flexible width; the vertical bar of iPhone Duo is the reverse, a fixed width and items of flexible height. It suits symbol-only items, and by default the system puts only items that have a symbol there.

An item with only text stays in a horizontal bar, and a control too wide for the column, like a text button or a segmented control, stays in the navigation bar at the top of the screen. On the outer display, wider and shorter than the display on other iPhone models, that bar takes back some of the height the controls on the side were meant to free up for content.

The rules

  1. 1

    Give every bar item a symbol and a title, and let the system pick the form. On the side, it shows the symbol. In a horizontal bar, it prefers the symbol and falls back to the title. In the overflow menu, it shows both. Give a title even to an item people only ever see as a symbol: the system uses it in the overflow menu and in expanded forms.

    AppleHIG, Vertical controls · Developer article, Organize items in your bars · “Raise the bar”, 6:13 · “Raise the bar”, 6:32 · “Raise the bar”, 7:13

  2. 2

    Keep text buttons to a minimum, and prefer a symbol wherever one works. An item with only a title, like an Edit button with no symbol, doesn’t move to the side: it stays in a horizontal bar.

    AppleHIG, Vertical controls · Developer article, Organize items in your bars · “Raise the bar”, 7:13 · “Raise the bar”, 8:59

  3. 3

    A control too wide for the column, like a text button or a segmented control, stays in the navigation bar. A view the app draws itself also stays horizontal: the system keeps it there unless the app declares that it can go vertical, as a compass view can. Then give it a form that fits the bar’s fixed width, or a vertical version: an action panel, for example, hides its titles and gets shorter.

    Apple“Design for iPhone Duo”, 6:15 · “Raise the bar”, 8:31 · “Raise the bar”, 10:06 · Developer article, Organize items in your bars

  4. 4

    Keep related items on the same axis. An item that switches between a symbol and text depending on its state, like the Edit button in Clock, stays horizontal, even though its symbol could move to the side. The system handles this on its own for the standard Edit button; for an app item that switches between a symbol and text, the app keeps it horizontal with a setting.

    Apple“Raise the bar”, 8:05 · “Raise the bar”, 8:19 · “Raise the bar”, 8:25 · “Raise the bar”, 8:31

  5. 5

    Turn a count into a badge. Rather than a number written next to an inbox symbol, put a badge on the symbol: the item becomes symbol-only, and it moves to the side. Use the system badge, added in iOS 26, so it looks standard on every device.

    Apple“Raise the bar”, 8:59 · “Raise the bar”, 9:25

  6. 6

    For each piece of text, ask whether it repeats the symbol or carries information of its own. If it repeats the symbol, the symbol is enough. If it carries information, like the amount on a cart button, keep the control in the horizontal bar.

    Apple“Raise the bar”, 9:25 · “Raise the bar”, 9:50

  7. 7

    When text is the point of a menu, with long labels or many entries, don’t reduce it to symbols: present it in rows. With the device closed, make the menu a list screen people navigate from, the way a system split view collapses its sidebar into a single screen; on the inner display, it can become a sidebar, beside the content or over it. Apple suggests the sidebar for information-dense apps with a tab bar, and says nothing about text menus.

    RecommendationApple sources: “Prepare your app”, 5:19 · “Prepare your app”, 5:39 · “Design for iPhone Duo”, 8:23

  8. 8

    Keep the ellipsis (three dots) for the system’s overflow menu, and give any other menu a symbol of its own.

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

Demo

A generic shopping app, closed, in portrait: its controls are on the side. Switch from text labels to symbols: the items that become symbols move into the column, while Edit and the cart’s total stay at the top.
Static version, no JavaScript
  1. Edit$24.909:41Share12
    9:41

    Text labels. Text labels, as on other iPhone models: Edit, Share, a message count and the cart’s total are all text, so they stay in a bar at the top, and the column on the side holds only the back button and the tab bar (rules 2 and 5).

  2. Edit$24.909:4112
    9:41

    Symbols. Symbols: Share becomes a symbol and the count a badge on the messages symbol, and both move into the column. Edit stays at the top, as Apple keeps its standard Edit button in the horizontal bar; so does the cart, whose total carries information (rules 1, 4, 5 and 6).

FAQ

Why do some buttons stay at the top on iPhone Duo?

A text-only item, an item that switches between a symbol and text, a segmented control, or a view the app draws itself stays in a horizontal bar. Give the item a symbol and a title; for a view the app draws, give it a vertical form and declare that it can go vertical.

Does a bar item that only shows a symbol need a title on iPhone Duo?

Yes. On the side, the system shows only the symbol, but it shows the title as soon as the item moves into the overflow menu or into an expanded form.

How do I show a count in a bar on the side of iPhone Duo?

As a badge on the symbol, with the system badge. A number written next to the symbol keeps the item horizontal.

Can a cart button that shows an amount move to the side on iPhone Duo?

Better not: Apple advises keeping it in the horizontal bar, because the amount carries information the symbol alone doesn’t give.

What should I do with a text navigation menu on iPhone Duo?

If it has long labels or many entries, present it in rows: a list screen with the device closed, a sidebar on the inner display (a DuoApps recommendation).

Sources

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