Making the tab bar collapse while scrolling

Making the tab bar collapse while scrolling

Learn how to make tab bar minimize when responding to scrolling gesture using the new minimize behavior modifier.

With iOS 26 and the Liquid Glass design system, Apple introduced a new way the tab bar can respond to scrolling. Compliant to its Liquid Glass core principle, content first, TabView can now collapse as you scroll, letting the tab bar step out of the way so your content can take center stage.

The modifier that enables this behavior is tabBarMinimizeBehavior(_:) .

Let’s see how to use it.

The first step is to create the content view to be built and scrolled in the tabs of the TabView.

struct ContentView: View {
    var nameView: String
    var body: some View {
        VStack{
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("This is the \(nameView) view.")
            List{
                ForEach(0..<60) { index in
                    Text("Item number \(index)")
                }
            }
        }
    }
}

Now we can create the horizontal navigation structure with a tab bar that will respond to scrolling gestures.


struct TabBarView: View {
    var body: some View {
        // 1. 
        TabView {
            Tab("Home", systemImage: "house") {
                // 2.
                ContentView(nameView: "Home")
            }
            Tab("Alerts", systemImage: "bell") {
                ContentView(nameView: "Alerts")
            }
            Tab("Favorites", systemImage: "heart.fill") {
                ContentView(nameView: "Favorites")
            }
            Tab("Search", systemImage: "magnifyingglass") {
                ContentView(nameView: "Search")
            }
        }
        // 3.
        .tabBarMinimizeBehavior(.onScrollDown)
    }
}
  1. Create an instance of a TabView.
  2. Place the content in each Tab item.
  3. Call the tabBarMinimizeBehavior(_:) method on the  TabView .
0:00
/0:20

tab bar collapsing during scrolling

The modifier tabBarMinimizeBehavior(_:) takes a TabBarMinimizeBehavior value as a parameter among the following built-in ones:

  • automatic - the behavior is automatically set based on the surrounding context and changes accordingly to the platform:
    • On iOS, iPadOS, tvOS, and watchOS, the tab bar does not minimize.
    • On visionOS, it minimizes when people look away from it.
    • On macOS, it minimizes when the window has reduced space.
The automatic minimized behavior on macOS: collapsing based on window's size
  • never - The tab bar never collapses.
  • onScrollDown - Only works on iPhone; it makes the tab bar collapse when scrolling downwards starts.
  • onScrollUp - Only works on iPhone; it makes the tab bar collapse when upward scrolling starts.
0:00
/0:13

This minimized behavior is particularly useful when combined with TabRole. By assigning specific tabs a role, you can prioritize which items remain visible while still adhering to the content-first principle of Liquid Glass.

Here is an example of creating an instance of a Tab using the init(role:content:) initializer so that you can define its TabRole . In this case, use the built-in search value.

struct TabBarView: View {
    var body: some View { 
        TabView {
            Tab("Home", systemImage: "house") {
                ContentView(nameView: "Home")
            }
            Tab("Alerts", systemImage: "bell") {
                ContentView(nameView: "Alerts")
            }
            Tab("Favorites", systemImage: "heart.fill") {
                ContentView(nameView: "Favorites")
            }
            // 1.
            Tab(role: .search,
                content: {
                ContentView(nameView: "Search")
            },
                label: {
                Image(systemName: "magnifyingglass")
                
            })
        }
        .tabBarMinimizeBehavior(.onScrollDown)
    }
}
0:00
/0:16

tab bar with TabRole for search collapsing during scrolling

To learn more about adapting search to the Liquid Glass Design System, refer to this article.

Adapting Search to the Liquid Glass Design System
Discover how search behaves within the new Apple design system within a SwiftUI app.

The new tabBarMinimizeBehavior(_:) modifier in iOS 26 makes it easy to create tab bars that step out of the way when users scroll, keeping the focus exactly where it should be, on the content.

Paired with TabRole, it follows the Liquid Glass principle of content first, making apps feel cleaner, more immersive, and closer to Apple’s own design language. If you’re using SwiftUI, this is one of those updates that requires almost no code but instantly modernizes your app look and feel.