How to add a Vertical Toolbar in SwiftUI

If you are an iOS Developer building a modern interface with SwiftUI, adding a vertical toolbar can be a useful way to provide quick access to navigation actions, editing tools, or frequently used features. Unlike a traditional horizontal toolbar, a vertical toolbar can make better use of the available space on larger screens, especially when designing apps for iPadOS or landscape layouts.

In this tutorial, you will learn how to create a vertical toolbar in SwiftUI using Swift and Xcode, starting with a basic project and gradually building a functional vertical toolbar.

What You Need to Get Started

Before creating the toolbar, make sure you have a recent version of Xcode installed on your Mac. You should also have basic knowledge of Swift and SwiftUI, including how views, modifiers, and stacks work.

For this example, we will create a simple application with a main content area and a vertical toolbar containing several buttons.

Open Xcode and create a new iOS project. Select the App template, choose SwiftUI as the interface, and select Swiftas the programming language.

Once the project is created, open ContentView.swift.

Creating the Basic SwiftUI Layout

The first step is to create a layout where the toolbar can sit next to the main content. The easiest way to do this in SwiftUI is to use an HStack.

An HStack arranges its children horizontally, allowing us to place the toolbar on one side and the main application content on the other.

Replace the default ContentView with the following code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            VStack(spacing: 20) {
                Button(action: {
                    print("Home selected")
                }) {
                    Image(systemName: "house")
                        .font(.title2)
                }

                Button(action: {
                    print("Settings selected")
                }) {
                    Image(systemName: "gear")
                        .font(.title2)
                }

                Button(action: {
                    print("Profile selected")
                }) {
                    Image(systemName: "person")
                        .font(.title2)
                }
            }
            .padding()
            .frame(width: 70)
            .background(Color.gray.opacity(0.15))

            Text("Main Content")
                .font(.largeTitle)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

Here, the VStack creates the vertical arrangement of buttons. Because the buttons are inside an HStack, the toolbar appears on the left side of the application.

Styling the Vertical Toolbar

A functional toolbar does not have to look plain. You can customize its background, spacing, size, and icons to match your application’s design.

For example, you can add a rounded background and change the button colors:

VStack(spacing: 24) {
    Button(action: {
        print("Home")
    }) {
        Image(systemName: "house.fill")
            .foregroundStyle(.blue)
    }

    Button(action: {
        print("Search")
    }) {
        Image(systemName: "magnifyingglass")
            .foregroundStyle(.blue)
    }

    Button(action: {
        print("Settings")
    }) {
        Image(systemName: "gearshape.fill")
            .foregroundStyle(.blue)
    }
}
.padding()
.background(.regularMaterial)
.clipShape(RoundedRectangle(cornerRadius: 16))

Using SF Symbols is particularly convenient because they are included with Apple’s development tools and integrate naturally with SwiftUI.

Adding Selection State

A useful vertical toolbar in SwiftUI should normally indicate which tool or section is currently active. You can achieve this with a @State property.

For example:

@State private var selectedTool = "home"

You can then update the selected tool when a button is pressed:

Button {
    selectedTool = "home"
} label: {
    Image(systemName: "house.fill")
}

To highlight the selected button, conditionally change its background:

.background(
    selectedTool == "home"
        ? Color.blue.opacity(0.2)
        : Color.clear
)
.clipShape(RoundedRectangle(cornerRadius: 8))

This approach gives users immediate visual feedback when interacting with the toolbar.

Making the Toolbar Reusable

If your project is growing, an iOS Developer should consider separating reusable components from the main view. Create a dedicated VerticalToolbar view:

struct VerticalToolbar: View {
    @Binding var selectedTool: String

    var body: some View {
        VStack(spacing: 20) {
            ToolbarButton(
                icon: "house.fill",
                id: "home",
                selectedTool: $selectedTool
            )

            ToolbarButton(
                icon: "gearshape.fill",
                id: "settings",
                selectedTool: $selectedTool
            )
        }
        .padding()
        .frame(width: 70)
        .background(.regularMaterial)
    }
}

You can then use this component from ContentView, making the project easier to maintain.

Testing the Toolbar in Xcode

Press Command + R in Xcode to build and run the application. Test each button and verify that the selected state changes correctly.

The Xcode preview can also help you iterate quickly while developing your SwiftUI interface. Test different device sizes and orientations to ensure the toolbar does not take up too much space.

For iPad applications, consider using a wider toolbar or adding tooltips and accessibility labels to make the interface easier to understand.

Conclusion

Creating a vertical toolbar in SwiftUI is straightforward when you combine HStack, VStack, buttons, and SwiftUI state management. By using Swift, Xcode, and SwiftUI, you can create a flexible toolbar that works well for navigation and productivity-focused applications.

For an iOS Developer, building the toolbar as a reusable SwiftUI component is especially useful because it makes the interface easier to maintain and extend as the application grows.