SwiftUI Toolbar in iOS 26: Liquid Glass Groups, Spacers and Titles

Recompile an app with the iOS 26 SDK and the toolbar looks different before you change a line. Buttons float on Liquid Glass, neighbors share a capsule, the search field drops to the bottom of the screen, and the inline title doesn't always stay centered. This guide explains how the SwiftUI toolbar in iOS 26 decides what goes together, and which APIs let you take control.

It's based on Apple's WWDC25 sessions Build a SwiftUI app with the new design and What's new in SwiftUI, Apple's documentation, and posts by iOS developer @sarunw. The APIs here are new in iOS 26.0 unless noted, and some behavior has shifted between point releases, so check it on the versions you support. The last section covers what happens to these toolbars on iPhone Duo.

How does iOS 26 group toolbar items into Liquid Glass?

In iOS 26, toolbar items sit on a Liquid Glass surface that floats above your content and adapts to what's beneath it. Apple's session puts the key rule plainly: "Toolbar items are automatically grouped." Items next to each other in the same placement share one capsule, while the system back button keeps its own.

Grouping is usually what you want, because it keeps the bar calm. It goes wrong when unrelated actions end up in the same capsule. A developer on Apple's forums found that two leading items always merged, even with different placements, until a spacer separated them.

Apple also changed the look of what sits inside the glass. Toolbar icons are monochrome in more places, which "reduces visual noise." You can still tint, but Apple's advice is to "use this to convey meaning, like a call to action or next step, but not just for visual effect." The session also asks you to remove any custom backgrounds or darkening behind bar items, since they interfere with the new scroll edge effect. That effect changes again in iOS 27, which our guide to the SwiftUI scroll edge effect covers.

Why does a prominent button get its own capsule?

A primary action like Done or Save should stand out from the buttons around it. In iOS 26, you get that with the new glass button styles. Apple's session introduces them as styles that "bring Liquid Glass to any button in your app": .glass for a standard button and .glassProminent for a prominent one.

In a toolbar, a prominent button also changes how grouping works. As @sarunw puts it, "A prominent button never shares a glass capsule in an iOS 26 toolbar." Add .buttonStyle(.glassProminent) and the button moves out of its group into its own tinted circle.

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

In this sample, Share keeps a regular glass background and Done sits apart in its own tinted shape. Add .tint(_:) to choose the color. Apple's What's new in SwiftUI session shows the same idea with .buttonStyle(.borderedProminent) and .tint(.pink) on a primary action.

Use this for one action per bar. If everything is prominent, nothing is. Also note a forum report that .glassProminent toolbar buttons appeared untinted for about a second after navigation in the iOS 26.1 release candidate. An Apple engineer said it "sounds like a bug," so check the releases you support.

How do I separate toolbar groups with ToolbarSpacer?

When automatic grouping puts the wrong items together, use ToolbarSpacer. Apple describes it as an item that "creates visual breaks in the toolbar between items." Its initializer is init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic), and it's available from iOS 26.0.

Apple's Landmarks sample uses fixed spacers to divide its detail toolbar into three sections: share, then favorite and collections, then the inspector toggle.

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

This sample is condensed from Apple's. The two related buttons share a capsule, while Share and Info each get their own. Give the spacer the same placement as the items around it, for example ToolbarSpacer(.fixed, placement: .topBarLeading). Without one, the spacer uses .automatic placement and may not land between the items you meant, which is what tripped up the forum developer.

For a single item that shouldn't sit on glass at all, such as a profile picture, Apple's session shows .sharedBackgroundVisibility(.hidden) on the ToolbarItem. That separates the item into its own group without a background.

How do I give the bottom-bar search field its own capsule?

On iPhone, iOS 26 moves search to the bottom of the screen. Apple's session says search in the toolbar "places the field at the bottom of the screen, within easy reach." To decide where the field goes among your own bottom-bar items, place a DefaultToolbarItem with the search kind.

The catch is that the search field is a toolbar item too. As @sarunw notes, in iOS 26 "it merges with the buttons next to it." His fix is to put a fixed ToolbarSpacer on each side to give it its own capsule:

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

Filter, search and New Note now sit in three separate capsules. Apple's Mail-style example in the same session uses a flexible spacer before search instead, which pushes the filter to the leading edge, and a fixed spacer between search and compose. Pick the version that matches how related the items are.

Depending on device size and the number of buttons, the system may minimize the field into a button. If search isn't central to your app, opt in with .searchToolbarBehavior(.minimize). Natalia Panferova's write-up on iOS 26 search wraps these calls in if #available(iOS 26.0, *) so the same code builds for older targets.

Why did my inline navigation title move to the leading edge?

Another surprise in iOS 26 is the inline title. On iOS 18 it sat in the center of the navigation bar. In iOS 26, as @sarunw shows, "an inline title stays centered only when it fits. Add one more toolbar item, and the title moves to the leading edge."

Developers have run into this from both directions. One UIKit developer on Apple's forums saw a segmented control in the title view centered with no bar button items, and left-aligned once a single trailing item appeared. Apple's reply only asked for a bug report, so there's no official statement on the exact rule.

The practical advice is to design for both positions:

• Keep titles short, so they fit in the center more often.
• Don't line up content with a centered title. It may not stay there.
• Count your items. Moving a rarely used action into a Menu frees space in the bar.

What changed for segmented pickers and sliders in iOS 26?

Toolbars aren't the only controls that changed. Apple's session says that "toggles, segmented pickers, and sliders now transform into liquid glass during interaction." Two details are worth knowing because they arrive with no code change.

Segmented pickers. @sarunw describes SwiftUI's segmented picker as cleaner on iOS 26, with a rounder selected segment, separators gone and the same code. A standard picker like Apple's sample picks up the new look on its own:

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

Stepped sliders. Sliders now support tick marks, and Apple says they "appear automatically when initializing a slider with a step parameter." @sarunw's example: step: 1 adds a tick mark for each value.

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

The first slider shows five ticks. The second uses neutralValue, which Apple adds in iOS 26 so the track fill starts from a middle value, like normal playback speed. The same initializer also takes enabledBounds to limit the selectable range and a tick closure that returns a SliderTick to place ticks yourself. If a slider has many steps, the ticks may be more than you want, so look at it before shipping.

How do iOS 26 toolbars behave on iPhone Duo's vertical bar?

On iPhone Duo, apps built with the iOS 27.1 SDK get a vertical bar on the outer display and on the inner display in landscape: navigation and toolbar items move to a column along one side. Our iPhone Duo vertical toolbar guide covers that in full. Here's how the iOS 26 toolbar APIs carry over, based on Apple's Raise the bar with iPhone Duo Tech Talk.

• Spacers. "By default, flexible spacers are zero size in the vertical axis. But fixed spacers continue to respect their minimum size." A flexible spacer that pushes groups apart horizontally does nothing vertically, while a fixed spacer still separates groups.
• Grouping. When top and bottom bars become one vertical bar, Apple says the remaining items "preserve their original grouping," with a spacer separating what came from the top and the bottom.
• No extra padding. Apple's advice is that your app "shouldn't be creating additional spacing, regardless of if a bar is horizontal or vertical." Don't add padding inside items to fake a gap; use ToolbarSpacer.
• Icons and titles. As @sarunw notes, items with an icon move to the vertical bar, while text-only items stay horizontal. Give your prominent Done button a systemImage as well as a title.
• Where Done goes. Apple asks you to put prominent actions like Done near the top with ToolbarItem(placement: .topBarPinnedTrailing), new in iOS 27.0. Apple's documentation says pinned items only move to the overflow menu when search is active and there isn't enough room.

The Tech Talk doesn't cover how .glassProminent or the bottom-bar search field look on a vertical bar, so check those in the iPhone Duo simulator. Tab bars also move to the side, which our guide to tab bars and NavigationSplitView on iPhone Duo explains.

Key takeaways

• iOS 26 groups neighboring toolbar items into shared Liquid Glass capsules automatically.
• .buttonStyle(.glassProminent) takes a button out of its group into its own tinted shape. Use it for one primary action.
• ToolbarSpacer(.fixed) splits groups and ToolbarSpacer(.flexible) pushes them apart. Give spacers the same placement as their neighbors.
• Surround DefaultToolbarItem(kind: .search, placement: .bottomBar) with fixed spacers to give search its own capsule.
• Inline titles only stay centered when they fit, so design for a leading title too.
• On iPhone Duo's vertical bar, flexible spacers collapse to zero, fixed spacers remain and groups survive.

Next, see how these bars move to the side on the new device in our iPhone Duo vertical toolbar guide, then work through the iPhone Duo preparation checklist. For apps that already do something real with the hinge, browse Built for the fold.