Liquid Glass Navigation Bar in SwiftUI


iOS 26 introduces new capabilities for customizing navigation bars in SwiftUI — including navigation subtitles, the ToolbarSpacer
, and more powerful ToolbarItemGroup
placement. In this tutorial, we’ll build a small demo that showcases how to use these features.
PS: The code in this post is available here.
🧱 Step 1: Set up a navigation view with a list
Use NavigationView
to gain access to the new iOS 26 toolbar system.
if #available(iOS 26, *) {
NavigationView {
List {
LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing)
.listRowInsets(.init())
Toggle("Enables Toolbar Spacer", isOn: $isToolbarSpacerEnabled)
Text("Item 1")
Text("Item 2")
Text("Item 3")
}
}
}
Using #available(iOS 26, *)
ensures that the new APIs don’t cause crashes on older OS versions.
The linear gradient is just for demo purpose to make the glass effect more visible.
🔤 Step 2: Set the Navigation Title and Subtitle
New in iOS 26 is the .navigationSubtitle(_:)
modifier. This lets you add a small subtitle under the main title.
.navigationTitle(Text("Favorites"))
.navigationSubtitle("Synced just now")
See the subtitle below the regular nav title? As always, when your scroll up, both titles in large display mode will become inline automatically.
🧰 Step 3: Add Toolbar Items (with APIs before iOS 26)
We now define toolbar items, for example with three buttons.
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button("Add", systemImage: "plus") { }
}
ToolbarItem(placement: .topBarTrailing) {
Button("Download", systemImage: "square.and.arrow.down") { }
}
ToolbarItem(placement: .topBarTrailing) {
Button("Share", systemImage: "square.and.arrow.up") { }
}
}
See in iOS 26, the new design grouped all three toolbar items together. Also, inline navtile title and subtile got pushed to the leading side if trailing items took much space.
🔸 Step 4: New API ToolbarSpacer
and ToolbarGroup
iOS 26 introduces ToolbarSpacer
, which gives you fine-grained control over toolbar layout. Let’s replace the toolbar content with the code below.
ToolbarItemGroup(placement: .topBarTrailing) {
Button("Add", systemImage: "plus") { }
Button("Download", systemImage: "square.and.arrow.down") { }
}
ToolbarSpacer(placement: .topBarTrailing)
ToolbarItemGroup(placement: .topBarTrailing) {
Button("Share", systemImage: "square.and.arrow.up") { }
}
Using ToolbarItemGroup
allows us to group buttons together, while ToolbarSpacer
inserts spacing between them to seperate different type of functionalities.
✅ Summary
With iOS 26, SwiftUI gives us:
navigationSubtitle(_:)
for better context in navigation barsToolbarItemGroup
to logically group actionsToolbarSpacer
to space groups apart visually and functionally
These additions make it easier to design adaptive, organized toolbars that better reflect user intent.
This lets you separate logical sections of toolbar items — improving both UX and layout responsiveness.
Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.
Subscribe to my newsletter
Read articles from Xavier directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Xavier
Xavier
iOS developer from Toronto, ON, CAN