# 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**](https://github.com/xavier7t/iOSDevX/blob/main/iOSDevX/202507-Jul%202025/DemoNavBar20250727.swift).

# 🧱 Step 1: Set up a navigation view with a list

Use `NavigationView` to gain access to the new iOS 26 toolbar system.

```swift
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.

```swift
.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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753674958887/e1409174-5205-4f40-ae80-9f838c40342a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753674994221/4e1a2937-c39a-4894-922b-415ccd04b4f6.png align="center")

# 🧰 Step 3: Add Toolbar Items (with APIs before iOS 26)

We now define toolbar items, for example with three buttons.

```swift
.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") { }
        }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753675142837/8b963198-4a8f-40e9-8388-59cabfad2922.png align="center")

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.

```swift
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1753675391754/a7630e84-a5ce-489a-8f84-8e6530452912.png align="center")

## ✅ Summary

With iOS 26, SwiftUI gives us:

* `navigationSubtitle(_:)` for better context in navigation bars
    
* `ToolbarItemGroup` to logically group actions
    
* `ToolbarSpacer` 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**](http://buymeacoffee.com/xavierios).