TechnologiesSwiftUI

TabBarPlacement struct

iOSmacOStvOSwatchOSvisionOSiOS 18.0+✓ renders

A placement for tabs in a tab view.

How it works

TabBarPlacement describes where content attaches in relation to a tab bar, giving SwiftUI a vocabulary for positioning accessory and bar-adjacent views. You reach for it when a TabView needs supplementary chrome — a now-playing strip, a mini player, a contextual toolbar — that should ride with the tab bar rather than scroll inside a tab's content. Because the type captures placement rather than the view itself, SwiftUI can decide how that content sits relative to the bar and adapt it as the tab bar expands, collapses, or floats on platforms that use a Liquid Glass tab bar. Treat it as the placement token that bottom-bar modifiers consult, not as something you typically construct by hand.

  1. Anchor placement to a TabView

    TabBarPlacement only has meaning in the presence of a tab bar, so the placement is resolved against the bar that a TabView vends. In the example the bar is established by the TabView that wraps the Tab("Home", systemImage: "house") and Tab("Search", systemImage: "magnifyingglass") entries; that bar is the surface the placement positions content against.

  2. Apply a bottom accessory with tabViewBottomAccessory

    The modifier that puts TabBarPlacement to work is tabViewBottomAccessory, which installs a view in the bottom-accessory placement just above the tab bar. SwiftUI uses the placement to keep that accessory pinned to the bar region instead of treating it as ordinary tab content, so it persists as you move between tabs.

  3. Provide the accessory content

    The placement defines the slot; the closure you hand to tabViewBottomAccessory defines what fills it. Here the HStack holding Image(systemName: "music.note"), the Text("Now Playing") label, a Spacer, and the Image(systemName: "play.fill") control is the content laid into the bottom-accessory placement.

  4. Let placement drive adaptation

    Because the accessory lives in a placement rather than a fixed frame, SwiftUI can resize, inset, or collapse it as the tab bar changes state. The .padding(.horizontal) on the HStack tunes the content's own insets, while the surrounding placement governs how the whole strip tracks the bar across size and platform variations.

Try it — Add a second control to the accessory — for example, place another Image(systemName: "forward.fill") after the Image(systemName: "play.fill") inside the HStack — and watch how the bottom-accessory placement keeps both pinned to the tab bar.

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.

TabBarPlacement.swift
struct TabBarPlacementDemo: View {
    var body: some View {
        TabView {
            Tab("Home", systemImage: "house") {
                Text("Home")
                    .padding()
            }
            Tab("Search", systemImage: "magnifyingglass") {
                Text("Search")
                    .padding()
            }
        }
        .tabViewBottomAccessory {
            HStack {
                Image(systemName: "music.note")
                Text("Now Playing")
                Spacer()
                Image(systemName: "play.fill")
            }
            .padding(.horizontal)
        }
    }
}
Live preview
Home Home Home
Home Home Home
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →