iOS 26 Liquid Glass - How to achieve separate glass backgrounds for multiple leading toolbar items?

Question

Created 2d

Replies 2

Boosts 0

Participants 2

I'm updating my app for iOS 26's new Liquid Glass design and encountering unexpected behavior with toolbar items. I want to display multiple buttons on the leading side of the navigation bar, each with its own glass background (similar to how LandmarkDetailView shows separate glass backgrounds for its toolbar items). Current Behavior:

When using .navigationBarLeading placement for multiple ToolbarItems, they all group under ONE glass background When using NO placement (like in Apple's LandmarkDetailView example), items get separate glass backgrounds but appear on the RIGHT side Using different leading placements (.topBarLeading vs .navigationBarLeading) still groups them together

What I've Tried:

swift// Attempt 1: All items with same placement - they group together
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "dollarsign.circle") }
    }
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "qrcode") }
    }
}

// Attempt 2: No placement - separate glass but wrong position
.toolbar {
    ToolbarItem {
        Button(action: {}) { Image(systemName: "dollarsign.circle") }
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button(action: {}) { Image(systemName: "qrcode") }
    }
    ToolbarSpacer(.flexible)
}

// Attempt 3: Different placements - still groups
.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button(action: {}) { Image(systemName: "dollarsign.circle") }
    }
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "qrcode") }
    }
}

Environment:

Xcode 26 Beta iOS 26.0 Beta Using NavigationView (also tried NavigationStack) This is a root view (no back button)

Questions:

Is grouping of same-placement toolbar items the intended Liquid Glass behavior? How can I achieve separate glass backgrounds for multiple leading toolbar items? Why do items without placement appear on the right in a root view? Is there new API or guidance for toolbar layouts in iOS 26?

I've studied the LandmarkDetailView example from Apple, but it uses no placement and relies on being a detail view with a back button. My use case is a root navigation view. Any guidance would be appreciated!

Answered by chrisharper22 in 844127022

I've been playing with toolbars. If I understand correctly, you'd want something like this:

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "dollarsign.circle") }
    ToolbarSpacer(.fixed, placement: .navigationBarLeading)
    }
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "qrcode") }
    }
}

Boost

Answer 1

chrisharper22 OP

2d

Accepted Answer

I've been playing with toolbars. If I understand correctly, you'd want something like this:

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "dollarsign.circle") }
    ToolbarSpacer(.fixed, placement: .navigationBarLeading)
    }
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {}) { Image(systemName: "qrcode") }
    }
}

1

Answer 2

Inheritor OP

17h

Yes, this is exactly it. The key insight is that ToolbarSpacer can take a placement parameter!

0