Navigation bar title in the same vertical space as the toolbar items in iOS 26?

Question

Apple's iOS 26 new design language shows the navigation bar title in the same vertical area as the top tool bar:

Video: WWDC25: Design foundations from idea to interface

However when I try to do the same thing in my app:

var body: some View {
    NavigationView {
        Text("Content")
        .toolbar { ToolbarItem { EditButton() } }
        .navigationTitle("Navigation Title")
        .navigationBarTitleDisplayMode(.automatic)
    }
}

The large Navigation Title is displayed under the toolbar area:

I believe this placement was the default in previous versions of iOS.

How can I achieve the new iOS 26 title-and-toolbar design as shown in the WWDC videos?

Answer 1

One way to achieve it is by using the .toolbarTitleDisplayMode(.inlineLarge) modifier (iOS 17 or newer) together with a ToolbarItemGroup:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Content")
                .navigationTitle("Records")
                .toolbarTitleDisplayMode(.inlineLarge)
                .toolbar {
                    ToolbarItemGroup {
                        Button {
                            
                        } label: {
                            Image(systemName: "plus")
                        }
                        Button {
                            
                        } label: {
                            Image(systemName: "rectangle.stack.badge.plus")
                        }
                        Button {
                            
                        } label: {
                            Image(systemName: "ellipsis")
                        }
                    }
                }
        }
    }
}

On an iOS 26 device: