iosswiftswiftuiios26

iOS 26 Liquid Glass ToolbarItem Animation During Navigation


In iOS 26, the ToolbarItem animates during navigation which creates a disorienting effect. Is it possible to disable this without using system-wide settings like Reduced Motion?

You can run the code below to reproduce the behavior. The Done button is the item in question.

A recording of the navigation bar animation in iOS 26.

import SwiftUI

@main
struct NavBarTestApp: App
{
    var body: some Scene
    {
        WindowGroup
        {
            ContentView()
        }
    }
}

struct ContentView: View
{
    @State private var navigationPath: NavigationPath = NavigationPath()
    
    private func onAction(
        _ text: String
    )
    {
        navigationPath.append(text)
    }
    
    var body: some View
    {
        NavigationStack(path: $navigationPath)
        {
            SomeForm(
                text:       "Hello World",
                onAction:   { onAction("Hello World") }
            )
            .navigationDestination(for: String.self)
            {
                text in
                
                SomeForm(
                    text:       text,
                    onAction:   { onAction(text) }
                )
            }
        }
    }
}

struct SomeForm: View
{
    let text        : String
    let onAction    : () -> Void
    
    var body: some View
    {
        Form
        {
            Section
            {
                Button(action: { onAction() })
                {
                    Text(text)
                }
            }
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar
        {
            ToolbarItem(placement: .topBarTrailing)
            {
                Button(action: { })
                {
                    Text("Done")
                        .bold()
                }
            }
        }
    }
}

Solution

  • Looks like this quirk animation is introduced by the new GlassEffectTransition, currently there is no way to disable it.

    In contrast, Apple's Files App does not exhibit this issue. The back button and right toolbar item do not undergo any animation.

    Therefore, a solution is to set a constant identifier to the toolbar item to render it static.

       // Disable the quirk animation by assigning a const id to the ToolbarItem
       ToolbarItem(id: "Const ID") {
          Button(action: { }) {
               Text("Done")
                  .bold()
          }
       }
    

    And this is the full code:

    import SwiftUI
    
    import SwiftUI
    
    struct ContentView: View
    {
        @State private var navigationPath: NavigationPath = NavigationPath()
    
        private func onAction(
            _ text: String
        )
        {
            navigationPath.append(text)
        }
    
        var body: some View
        {
            NavigationStack(path: $navigationPath)
            {
                SomeForm(
                    text:       "Hello World",
                    onAction:   { onAction("Hello World") }
                )
                .navigationDestination(for: String.self)
                {
                    text in
    
                    SomeForm(
                        text:       text,
                        onAction:   { onAction(text) }
                    )
                }
            }
        }
    }
    
    struct SomeForm: View
    {
        let text        : String
        let onAction    : () -> Void
    
        var body: some View
        {
            Form
            {
                Section
                {
                    Button(action: { onAction() })
                    {
                        Text(text)
                    }
                }
            }
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar
            {
    
    //            ToolbarItem(placement: .topBarTrailing)
    //            {
    //                Button(action: { })
    //                {
    //                    Text("Done")
    //                        .bold()
    //                }
    //            }
    
                // Disable the quirk animation by assign a const id to the ToolbarItem
                ToolbarItem(id: "Const ID") {
                    Button(action: { })
                    {
                        Text("Done")
                            .bold()
                    }
                }
            }
        }
    }
    
    #Preview {
        ContentView()
    }
    
    
    

    And now we totally removed the quirk animation.

    final working demo