Adapting Search to the Liquid Glass Design System

With the introduction of the Liquid Glass at WWDC25, Apple has redefined how components are positioned within the user interface, enhancing the user experience. This update includes the new search bar component, which dynamically adapts its behavior based on context, transitioning between an expanded and compact state to prioritize screen content.

Let's explore how to leverage these updates by adapting our apps to Apple’s new Liquid Glass Design System across all platforms.

By applying the searchable(text:placement:prompt:) modifier to a NavigationStack or a NavigationSplitView, the search bar is placed in the bottom area of the screen on iOS or at the top-right corner on iPadOS and macOS.

import SwiftUI

struct ContentView: View {

    @State var searchText: String = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                ContentUnavailableView("Search bar with \n Liquid Glass", systemImage: "swift")
            }
        }
        .searchable(
            text: $searchText,
            placement: .automatic,
            prompt: "type here to search"
        )
    }

}

On iPadOS and macOS, we can also include the search bar within the sidebar by using the searchable modifier applied to a view element within the NavigationStack. Keep in mind that this is intended to be used only when the research action filters the element of the sidebar, similar to how it works in the Settings app.

The new search bar component offers built-in support for the Liquid Glass material, providing a secondary layer that overlays your app’s content in the toolbar sections. This layer offers two different visualizations: a full-size version and a compact version, which can be achieved using the new searchToolbarBehavior(_:) modifier.

import SwiftUI

struct ContentView: View {

    @State var searchText: String = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                ContentUnavailableView("Search bar with \n Liquid Glass", systemImage: "swift")
            }
            .toolbar {
                ToolbarSpacer(.flexible, placement: .bottomBar)
                DefaultToolbarItem(kind: .search, placement: .bottomBar)
            }
            .searchable(
                text: $searchText,
                placement: .toolbar,
                prompt: "Type here to search"
            )
            .searchToolbarBehavior(.minimize)
        }
    }
    
}

Keep in mind that, for a more intuitive and convenient user experience, the search bar should always be placed at the bottom of the screen, provided the layout has space for it.

Additionally, it’s always possible to integrate the search functionality directly into the tab bar by initializing a TabView with a role, passing the search value as a parameter.

import SwiftUI

struct ContentView: View {

    @State var text: String = ""
    
    var body: some View {
        TabView {
            Tab {
                Color.teal.ignoresSafeArea()
            } label: {
                Label("Tab 1", systemImage: "1.circle")
            }
            
            Tab {
                Color.pink.ignoresSafeArea()
            } label: {
                Label("Tab 2", systemImage: "2.circle")
            }
            
            Tab(role: .search) {
                SearchView()
            }
        }
    }
}

struct SearchView: View {

    @State var searchText: String = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                ContentUnavailableView("Search Tab", systemImage: "magnifyingglass")
            }
            .navigationTitle("Search")
        }
        .searchable(
            text: $searchText,
            placement: .automatic,
            prompt: "type here to search"
        )
    }
    
}

The search experience has been greatly improved with the introduction of the Liquid Glass Design System. The redesigned search bar now adapts its behavior based on content, providing a more consistent and intuitive experienceacross all Apple platforms.