iOS 26 Liquid Glass ToolbarItem Animation During Navigation

Question

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.

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()
                }
            }
        }
    }
}

Answer 1

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.

---

Update

• l1szt mentioned that

With UIKit, the UIBarButtonItem includes a property named identifier, which can be modified after initialization.

• You can cancel this glass effect with modifier .sharedBackgroundVisibility(.hidden):

 ToolbarItem(id: "Const ID") {
                Button(action: { })
                {
                    Text("Done")
                        .bold()
                }
            }
            .sharedBackgroundVisibility(.hidden)