iPhone SwiftUI layouts

Explore SwiftUI APIs, components, and modifiers with interactive iPhone previews, Swift code, and Apple documentation. Compare every available orientation, appearance, and design.

TabView

TabView Bottom Accessory Placement

A placement of the bottom accessory in a tab view. You can use this to adjust the content of the accessory view based on the placement

Explore TabView Bottom Accessory Placement on iPhone in portrait, with SwiftUI code and Apple API documentation.

SwiftUI code

Full details Docs 
var body: some View {
    TabView {
        Tab("1", systemImage: "1.circle") {
            List {
                ForEach(0 ..< 100, id: \.self) {
                    Text("Item \($0)")
                }
            }
        }

        Tab("2", systemImage: "2.circle") {
            EmptyView()
        }

        Tab("3", systemImage: "3.circle") {
            EmptyView()
        }
    }
    .tabBarMinimizeBehavior(.onScrollDown)
        .tabViewBottomAccessory {
            AccessoryContent()
        }
    }

    struct AccessoryContent: View {
        @Environment(\.tabViewBottomAccessoryPlacement) var placement

        var body: some View {
            switch placement {
                case .inline:
                Text("Inline")
                case .expanded:
                Text("Expanded")
                case .none:
                Text("")
            }
        }
    }

Compatibility

iOS 26.0+ iPadOS 26.0+ macOS 26.0+ watchOS 26.0+ tvOS 26.0+ visionOS 26.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for TabView Bottom Accessory Placement.

1 views