Add Space in a Toolbar with Toolbar Spacer in SwiftUI

If you are an active iOS Developer, you know perfectly well that the way users interact with your application’s navigation completely defines their experience. Since the early days of Swift programming, the management of navigation and toolbars has been a point of constant evolution. With the arrival of iOS 26 and the unification of operating systems under the new Liquid Glass design language, Apple has introduced a tool that, although it seems small, revolutionizes the way we structure our interfaces: ToolbarSpacer.

In this article, we are going to dive deep into SwiftUI using Xcode to understand exactly what the ToolbarSpacer is, why you should stop using older methods, and how you can implement it professionally in your cross-platform projects spanning iOS, macOS, and watchOS.

The Evolution of Toolbars in Swift Programming

In the early versions of SwiftUI, managing space inside a toolbar used to be a headache. Developers often had to resort to wrapping their buttons inside an HStack and using the classic generic Spacer() to push elements towards the edges. While this worked on iPhone screens, when bringing the application to an iPad or a Mac via Mac Catalyst, the spacing behavior didn’t always respect Apple’s Human Interface Guidelines (HIG).

With the release of modern Swift and the latest API updates in Xcode, Apple decided to standardize this. This is where ToolbarSpacer comes into play, a native structure designed exclusively to live within the ecosystem of the .toolbar modifier.

What is ToolbarSpacer in SwiftUI?

ToolbarSpacer is a semantic component in SwiftUI introduced specifically to manage empty spaces and visual separations between different ToolbarItem or ToolbarItemGroup elements.

Unlike the traditional Spacer() we use in regular views, ToolbarSpacer is aware of the toolbar context. This means it knows exactly which platform it is running on (iOS, macOS, or watchOS) and adapts its physical and visual behavior to the specific guidelines of that platform.

For example, under the Liquid Glass aesthetic of iOS 26, a flexible spacer in the center of the screen not only pushes the elements to the sides but also ensures that the distribution of the toolbar’s translucent blur is mathematically perfect.

Basic Implementation in iOS: Our First Example in Xcode

To get started, open Xcode and create a new project using SwiftUI. We are going to simulate a profile editing screen where we need a “Cancel” button on the left and a “Save” button on the right.

Before looking at the code, remember that to create a button with SwiftUI is extremely simple, but the real magic lies in how we position it.

import SwiftUI

struct ProfileEditorView: View {
    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Personal Information")) {
                    TextField("Name", text: .constant(""))
                    TextField("Email", text: .constant(""))
                }
            }
            .navigationTitle("Edit Profile")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                // Main toolbar group
                ToolbarItemGroup(placement: .bottomBar) {
                    
                    // First button
                    Button(action: {
                        print("Cancel Action")
                    }) {
                        Text("Cancel")
                            .foregroundColor(.red)
                    }
                    
                    // Here we use the ToolbarSpacer
                    ToolbarSpacer()
                    
                    // Second button
                    Button(action: {
                        print("Save Action")
                    }) {
                        Text("Save")
                            .bold()
                    }
                }
            }
        }
    }
}

Analyzing the Code

In this Swift snippet, we created a ToolbarItemGroup and placed it in the bottom bar (.bottomBar).

By placing ToolbarSpacer() between the two buttons, we are telling SwiftUI: “I want the Cancel button to stay anchored to the left, and the Save button to go all the way to the right edge”.

The main advantage for the iOS Developer is that this code is completely semantic. There are no mathematical calculations, no fixed widths. If the user rotates their iPhone to landscape mode, the ToolbarSpacer will automatically expand to fill the new available space without breaking the layout.

Total Flexibility: Fixed vs. Flexible Spacers

One of the marvels of Swift programming applied to interfaces is the capacity for configuration. ToolbarSpacer doesn’t just act as an expansive spring; it can be configured in two main ways:

1. Flexible Mode (Default)

If you call ToolbarSpacer() without modifiers, it will take up all available horizontal (or vertical, depending on the bar) space. It is the equivalent of using .flexible().

2. Fixed Mode

Sometimes you don’t want to push elements to the edges of the screen; you just want to create a logical grouping with a small, fixed separation that the operating system considers “correct”.

.toolbar {
    ToolbarItemGroup(placement: .primaryAction) {
        Button(action: {}) {
            Image(systemName: "square.and.arrow.up")
        }
        
        // A spacer with a fixed width determined by the system
        ToolbarSpacer(fixedLength: 24)
        
        Button(action: {}) {
            Image(systemName: "trash")
                .foregroundColor(.red)
        }
    }
}

Technical note: Although you can force a size in points (like 24), the best practice in Xcode is to omit the number and simply use ToolbarSpacer(fixedLength: nil), which allows the operating system to apply the standard recommended measurement found in its design guidelines.

Taking your App to macOS: The Power of Customization

The true potential of ToolbarSpacer shines when you develop universal applications. If you are an iOS Developer who also compiles for Mac (either through Mac Catalyst or natively), this is where you will fall in love with this tool.

On macOS, users are accustomed to right-clicking the top toolbar and selecting “Customize Toolbar…”. In this panel, users can drag buttons and, most importantly, spacers.

When you use ToolbarSpacer in your SwiftUI code, Xcode automatically tells macOS that this space is an official “Flexible Space” of the system.

import SwiftUI

struct MacDocumentView: View {
    var body: some View {
        Text("Main Document")
            .toolbar(id: "main-toolbar") {
                ToolbarItem(id: "font", placement: .primaryAction) {
                    Button(action: {}) { Image(systemName: "textformat") }
                }
                
                // This spacer allows the Mac user to interact with it in customization mode
                ToolbarSpacer(id: "spacer-1")
                
                ToolbarItem(id: "export", placement: .primaryAction) {
                    Button(action: {}) { Image(systemName: "square.and.arrow.up") }
                }
            }
    }
}

By giving your toolbar and your spacer a unique id, macOS allows the user to decide whether they want to keep that space there or remove it, creating a truly native desktop experience with a single codebase in Swift.

Adapting to the Wrist: watchOS

We cannot forget the device with the most restricted screen of all: the Apple Watch. The unified ecosystem of version 26 has brought modern toolbars to watchOS.

On the Apple Watch, space is critical. Using a regular Spacer() inside a group of buttons used to cause text overflow issues or make buttons fall off the screen.

When using ToolbarSpacer in a watchOS project, the operating system interprets the developer’s intent and applies microscopic and intelligent spacing. If the Apple Watch screen is small (like on the 41mm model), the ToolbarSpacer reduces its size to the bare minimum so that touch targets (hitboxes) do not overlap. If viewed on an Apple Watch Ultra, it expands slightly to take advantage of the larger canvas.

Knowing how to create a button with SwiftUI for watchOS is useless if the interface feels cluttered. The semantic spacer solves this without you having to write conditional if-else statements based on device size.

Best Practices for the iOS Developer

To get the most out of this tool in your Xcode projects, here are some golden rules of modern Swift programming:

1. Avoid spacer overload: Don’t place a ToolbarSpacer between every single button if you have more than 4 elements. Group them logically. Place navigation actions (back, cancel) on one side, use a single ToolbarSpacer, and group finishing actions (save, send) on the other.
2. Layout Priority: Remember that if button text changes due to localization (for example, “Save” in English is much shorter than “Guardar” in Spanish), a flexible ToolbarSpacer will yield space to the text to prevent it from truncating.
3. Don’t use manual padding: Forget the .padding(.horizontal, 20) modifier inside ToolbarItems. That breaks responsive design on the iPad. Let the semantic spacer do the heavy lifting for margins.
4. Test in dark and light mode: The new translucent design introduced in the latest systems reacts to empty spaces by filtering the content beneath the bar. Using semantic spacers ensures that the glass blur renders evenly.

Conclusion

The world of Apple mobile and desktop development is advancing by leaps and bounds. What used to require dozens of lines of code and complex geometry calculations is resolved today with a simple and elegant structure in SwiftUI.

Learning to create a button with SwiftUI is the first stepping stone, but mastering screen composition and layout is what separates a beginner programmer from a high-level iOS Developer. Integrating ToolbarSpacer into your daily workflow of Swift programming within Xcode will not only make your code cleaner and easier to maintain, but it will ensure that your applications offer a perfect user experience, whether on an iPhone touchscreen, under a Mac cursor, or on an Apple Watch user’s wrist.