Custom tab bars, floating buttons and sheets

The system moves the bars it owns into the vertical bar for you (see Vertical toolbars and tab bars). Anything you drew yourself stays exactly where you put it.2 On the outer display that usually means a tab bar along the bottom, next to a side column holding only the clock, and a page squeezed between them.

A tab bar you drew

A custom UITabBar, UIToolbar or UINavigationBar you add to your view, or any bar built from your own views, never moves into the vertical bar.23

Switch to the system tab bar if you can. TabView and UITabBarController move to the side, compress, and fold items into the overflow menu as space runs out, with the system’s animation and touch handling.4 If a custom control is the reason you built your own bar, put it in a ToolbarItem with .axisBehavior(.verticalPreferred) instead. Keep it short: the bar’s height changes with the pose, and five or six custom segments can end up in the overflow menu or too small to tap.4

If you keep your own bar, lay it out from the system’s values:

• Read toolbarVerticalEdge in SwiftUI or the verticalBarEdge trait in UIKit. It’s nil when bars are horizontal, and names the edge when they’re vertical.3
• Use the safe-area inset on that edge as the column’s width. Don’t assume it’s the trailing edge: in Split View, controls move to the outer edge of each app, which is the leading edge for the app on the left.1
• Share the column. The status bar and the Dynamic Island sit there too, and the island grows down the column as Live Activities arrive.1 Query reserved regions to find the space they take.5
• Check it with Reduce Transparency on, which draws an opaque background behind the vertical bar.25

You won’t get what the system bar does for free: overflow, compression and the automatic switch between axes. The bar can also change side or height with rotation, Split View, Picture in Picture, the keyboard and Live Activities, and your code has to follow each change.5

Floating buttons

A floating action button is yours to place. The system doesn’t move it into the vertical bar, and it doesn’t nudge it off the fold the way it nudges sheets, alerts, menus and toolbar buttons.1

• Make it a toolbar item if it acts on the screen. An Add button for a list belongs in that list’s toolbar, where it moves with the bar and stays out of the fold.
• Otherwise, place it from the safe area. Offset it from the inset on each side, not from a fixed padding or the screen edge. Most content on iPhone Duo needs that offset so it isn’t hidden behind the controls.1
• Keep it off the fold. Buttons in the crease are hard to tap. Read the division region and move the button to one side of it.1

Content under the bar

Scrolling content can run under the vertical bar. The system adds an inset on that side, so every item can still scroll into view; don’t clip it.6 For a hero or background image, extend it under the bar with backgroundExtensionEffect() in SwiftUI or UIBackgroundExtensionView in UIKit.3 A full-width background with an inset foreground works well, as long as every control sits in the inset part.1

Sheets

Without any code, sheets adapt to the pose:13

• Outer display: the sheet’s toolbar moves into a vertical bar.
• Inner display: the sheet is centered with horizontal bars.
• Partly folded: the sheet slides off the fold.

To put a sheet on one side, use presentationPlacement(_:) in SwiftUI or preferredPlacement in UIKit, with automatic, center, leading or trailing.37 Placement changes the toolbar on the inner display: centered and leading sheets keep horizontal bars, and trailing sheets get a vertical bar.23 A gallery can open a photo’s sheet on the same side as the thumbnail that was tapped.7

.sheet(item: $selectedPhoto) { photo in
    PhotoSheet(photo: photo)
        .presentationPlacement(column(of: photo) < 2 ? .leading : .trailing)
}

In the iOS 27.1 beta, one developer found trailing sheets sometimes missed their vertical bar, leaving the close button under the status bar. Setting .presentationDetents([.large]) fixed it.7 Check your trailing sheets in both the open and partly folded poses.

For a sheet with a single control, such as a close button, a vertical bar costs width for little gain. Turn it off inside the sheet with .toolbarVerticalBehavior(.disabled), or preferredVerticalBarBehavior in UIKit. The sheet then stops just short of the front camera, and the status bar moves.13 The setting applies to the sheet alone. Keep it the same each time the sheet opens rather than switching with its state.8

Sheets and tab bars together

If your tab bar and sheet look attached on iPhone, decide whether they belong together. In Find My, each tab picks what the sheet shows, so they stay together on iPhone Duo. When a tab only opens its own sheet, they can separate.5

Checklist

1. Replace custom tab bars and toolbars with system containers where you can.
2. If you keep one, position it from toolbarVerticalEdge and the safe area on that edge, and test it with Live Activities, Split View on both sides, and Reduce Transparency.
3. Turn floating buttons into toolbar items, or place them from the safe area and off the fold.
4. Open every sheet on both displays and partly folded. Choose a placement and bar behavior for each.