TechnologiesSwiftUIToolbars and Commands

AdaptableTabBarPlacement struct

iOSmacOStvOSwatchOSvisionOSiOS 18.0+✓ renders

A placement for tabs in a tab view using the adaptable sidebar style.

How it works

AdaptableTabBarPlacement describes a placement for a tab bar that changes form as the interface adapts — for example, a row of tabs at the bottom of a compact iPhone layout that becomes a sidebar when there's room on iPad or in a resized window. You reach for it through the placement-aware tab APIs when you adopt an adaptable tab view style and want to express where a tab belongs in each presentation. Rather than hard-coding a single layout, it lets a tab declare its preferred home and lets SwiftUI resolve the rest as the environment changes. Use it when a tab should appear, hide, or move depending on whether the bar is rendered as a bottom bar or a sidebar.

  1. Opt into adaptable layout with tabViewStyle(.sidebarAdaptable)

    The placement only has meaning once the tab view can present in more than one form. Applying .tabViewStyle(.sidebarAdaptable) to the TabView tells SwiftUI to render a bottom bar in compact contexts and a sidebar when space allows — this is the adaptation that AdaptableTabBarPlacement is named for and the precondition for the per-tab placement modifiers below.

  2. Steer an individual tab with tabPlacement(_:)

    Each Tab can express where it should surface using the .tabPlacement(_:) modifier, which takes an AdaptableTabBarPlacement value. Here the Search tab is marked .tabPlacement(.sidebarOnly), so it appears among the sidebar items when the bar is presented as a sidebar but is omitted from the bottom bar — a single tab declaring a placement preference while the others stay everywhere.

  3. Choose a placement constant

    AdaptableTabBarPlacement exposes named placements as type properties so you write them with leading-dot syntax. .sidebarOnly, used in the example, scopes a tab to the sidebar form; pair it with the unmodified Home and Settings tabs to see how a default placement (present in both forms) contrasts with a restricted one.

  4. Let unmarked tabs take the default placement

    A Tab without a .tabPlacement(_:) modifier adopts the standard placement and shows up in whichever form the bar currently takes. The Home and Settings tabs carry no placement, so they remain visible as bottom-bar items and as sidebar items, giving AdaptableTabBarPlacement on Search something to adapt against.

Try it — Change the Search tab's .tabPlacement(.sidebarOnly) to remove the modifier (or set it back to a both-forms placement) and watch Search reappear in the bottom bar in compact layouts.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

AdaptableTabBarPlacement.swift
struct AdaptableTabBarPlacementDemo: View {
    @State private var selection = 1
    var body: some View {
        TabView(selection: $selection) {
            Tab("Home", systemImage: "house", value: 1) {
                Text("Home").padding()
            }
            Tab("Search", systemImage: "magnifyingglass", value: 2) {
                Text("Search").padding()
            }
            .tabPlacement(.sidebarOnly)
            Tab("Settings", systemImage: "gear", value: 3) {
                Text("Settings").padding()
            }
        }
        .tabViewStyle(.sidebarAdaptable)
        .padding()
    }
}
Live preview
Home Home Search Settings
Home Home Search Settings
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →