Elevated TabBar in iPadOS 18 covers Navigation-/Toolbar

The new "elevated" tab bar in iPadOS 18 covers the Navigation-/Toolbar of views within.

A very simple example:

import SwiftUI

@main
struct SampleApp: App {
    
    @State var selection: Int?
    
    var body: some Scene {
        WindowGroup {
            TabView {
                NavigationSplitView {
                    List(0..<10, selection: $selection) { item in
                        Text("Item \(item)")
                            .tag(item)
                    }
                } detail: {
                    if let selection {
                        Text("Detail for \(selection)")
                            .navigationTitle("Item \(selection)")
                            .navigationBarTitleDisplayMode(.inline)
                    } else {
                        Text("No selection")
                    }
                }.tabItem {
                    Label("Items", systemImage: "list.bullet")
                }
                
                Text("Tab 2")
                    .tabItem {
                        Label("Tab 2", systemImage: "list.bullet")
                    }
                
                Text("Tab 3")
                    .tabItem {
                        Label("Another Tab", systemImage: "list.bullet")
                    }
            }
        }
    }
}

I've tried using .safeAreaInset/.safeAreaPadding for the detail views, but they don't affect the NavigationBar, only the content within.

Is there a way to move the NavigationBar down, so its items stay visible?

Answered by DTS Engineer in 809085022

tabItem(_:) has been deprecated. Use the new Tab(title:image:value:content:) API instead.

tabItem(_:) has been deprecated. Use the new Tab(title:image:value:content:) API instead.

Elevated TabBar in iPadOS 18 covers Navigation-/Toolbar
 
 
Q