Quickie: How to get the new Search button on iOS 26

Updated on July 4 @ 7:15pm BRT: The original version of this post said the solution below was nowhere to be found on Apple's materials. That was a mistake, it's here.

If you've been reading and watching WWDC25 content like me, you've certainly seen the new big tab bar search button featured in many new design/Liquid Glass videos.

I'm studying the new design through the lens of my own app, Medo e Delírio, and while its new "universal search" experience is still not ready for prime time I really wanted to see how that new button would look on my app.

Thing is, the code to get this new button is easily missable, it's only mentioned at the end of the Search session of the Build a SwiftUI app with the new design video. It would be really great if it was in Apple's sample project.

Here's the solution:

import SwiftUI

struct MainView: View {

    @State private var searchText = ""
    
    var body: some View {
        TabView {
            Tab("Tab 1", systemImage: "headphones") {
                NavigationStack {
                    // View
                }
            }
            
            Tab("Tab 2", systemImage: "rectangle.grid.2x2") {
                NavigationStack {
                    // View
                }
            }
            
            Tab("Tab 3", systemImage: "chart.line.uptrend.xyaxis") {
                NavigationView {
                    // View
                }
            }
            
            Tab(role: .search) {
                NavigationStack {
                    // View
                }
            }
        }
        .searchable(text: $searchText)
    }
}

You really need to lean into this way of using the TabView with nested tabs to be able to set a tab role of .search. As far as I've seen there's no view modifier that gives you that same behavior.

This is a departure from my previous architecture that was like this:

struct OldMainView: View {
    
    var body: some View {
        TabView(selection: $tabSelection) {
            NavigationStack {
                // View
            }
        }
        .tabItem {
            Label("Tab 1", systemImage: "speaker.wave.3.fill")
        }
        .tag(PhoneTab.tab1Tag)
        
        TabView(selection: $tabSelection) {
            NavigationStack {
                // View
            }
        }
        .tabItem {
            Label("Tab 2", systemImage: "rectangle.grid.2x2")
        }
        .tag(PhoneTab.tab2Tag)
        
        TabView(selection: $tabSelection) {
            NavigationStack {
                // View
            }
        }
        .tabItem {
            Label("Tab 3", systemImage: "chart.line.uptrend.xyaxis")
        }
        .tag(PhoneTab.tab3Tag)
    }
}

This previous solution allowed me to quickly switch tabs in response to user action. I'll post another Quickie if I find a solution to satisfies both expectations.

Have you got the solution ready? Let me know by either commenting below of reaching out!

Extra Credit - Getting the new "minimized" behavior for the tab bar is really simple. It's as easy as this:

TabBar {
    // Your stuff
}
.tabBarMinimizeBehavior(.onScrollDown)

And here it is in action:

You can also set it to happen .onScrollUp. Keep in mind this behavior only applies to tab bars on iPhones.

See you next time.