SwiftUI NavigationStack ToolbarItem shows unwanted circular background behind icon

Question

I am trying to create a simple toolbar button in SwiftUI using NavigationStack, but it always shows an unwanted light circular/rounded background around the icon.

icon

I want to remove the circular background from the icon. Here is my current code:

    var body: some View {
        NavigationStack {
            ZStack {
                Color.indigo.ignoresSafeArea()
            }
            .navigationTitle(Strings.chats)
            .navigationBarTitleDisplayMode(.large)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                    } label: {
                        Image(systemName: "plus")
                    }
                }
            }
        }
        .toolbarBackground(.clear, for: .navigationBar)
        .toolbarBackgroundVisibility(.hidden, for: .navigationBar)
        
    }

Instead of removing the background you should make it transparent (Liquid Glass) — Leo Dabus
– Leo Dabus, Commented Nov 11 at 12:17

Benzy Neez · Accepted Answer · 2025-10-17 18:52:15Z

3

Try applying .sharedBackgroundVisibility(.hidden) to the ToolbarItem:

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button {
        } label: {
            Image(systemName: "plus")
        }
    }
    .sharedBackgroundVisibility(.hidden) // 👈 here
}

Screenshot

EDIT As you pointed out in a comment, the modifier .sharedBackgroundVisibility is only available for iOS 26. If you are supporting an earlier build target, the modifier needs to be applied conditionally. This conditional code can be encapsulated as an extension of ToolbarContent:

extension ToolbarContent {

    @ToolbarContentBuilder
    func hideSharedBackgroundIfAvailable() -> some ToolbarContent {
        if #available(iOS 26.0, *) {
            sharedBackgroundVisibility(.hidden)
        } else {
            self
        }
    }
}

Now the function hideSharedBackgroundIfAvailable can be used in place of the modifier sharedBackgroundVisibility in the code above:

ToolbarItem(placement: .topBarTrailing) {
    // content as before
}
.hideSharedBackgroundIfAvailable() // 👈 here

I would expect this to compile with all build targets from iOS 14.0 onwards.

edited Oct 17 at 18:52

answered Oct 15 at 16:05

Benzy Neez

29.6k3 gold badges22 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jarnojr Oct 15 at 16:12

Thanks, this worked. However, sharedBackgroundVisibility is only available on iOS 26. What should I use on earlier versions?

Benzy Neez Oct 15 at 16:20

With earlier versions, the circular background is not there, so there is no need to apply any modifier at all. You could use a conditional if #available(iOS 26.0, *) { ... } else { ... } for the two variants.

Benzy Neez Oct 17 at 18:52

Answer updated with an extension that can be used to apply the modifier conditionally.

Collectives™ on Stack Overflow

SwiftUI NavigationStack ToolbarItem shows unwanted circular background behind icon

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related