SwiftUI – How to create a Navigation Bar with custom items

Share on facebook
Share on twitter
Share on pinterest
Updated for Xcode 12.0 and SwiftUI 2.0 ✅

Customizing the navigation bar in SwiftUI by inserting bar items is super easy using the .toolbar modifier. Here’s how to do it! 👇

Step 1: Make sure your whole view is wrapped into a NavigationView. This injects you view into a navigation hierarchy allowing to user to navigate by pushing and popping views embedded into this hierarchy.

var body: some View {
        NavigationView {
            Text("Hello, World!")
        }
    }

Step 2: Add a navigation bar title to your navigation view. We do this using the .navigationTitle modifier. By using the “displayMode” argument, you can also decide if you want a large or a normal sized navigation bar.

var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Photo Editor")
        }
    }

Step 3: Now, we’re ready to add items to our navigation bar. Until recently, we would have done this using the .navigationBarItems modifier. But since this modifier is deprecated in Xcode 12, we need to use the new .toolbar modifier.

NavigationView {
            Text("Hello, World!")
                .navigationTitle("Photo Editor")
                .toolbar(content: {

                })
        }

The new .toolbar modifier is a result of SwiftUI 2.0 following a more cross-platform oriented development approach. 

Fortunately, the .toolbar modifier is quite easy to understand. To add navigation bar items, we just need to inject ToolbarItem instances into the .toolbar closure.

Step 4: Inside the .toolbar closure, add one ToolbarItem for each tab bar item. Use the “placement” argument to set the position of the item. Finally, you can wrap Button containing an Image view inside each ToolbarItem. 

.toolbar(content: {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button(action: {
                                addTask()
                        }) {
                            Image(systemName: "plus.circle")
                                .imageScale(.large)
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                                removeTask()
                        }) {
                            Image(systemName: "minus.circle")
                                .imageScale(.large)
                        }
                    }
                })

That’s it! 

Complete example:

And that’s it! Now you’re able to create your own Navigation Bar with custom items in SwiftUI.

struct ContentView: View {
    
    @State var items = [Item]()
    
    var body: some View {
        //Step 1: Wrap your ContentView into a NavigationView
        NavigationView {
            List(items) { item in
                Text(item.name)
            }
                //Step 2: Add a navigation bar title
                .navigationTitle("Photo Editor")
                //Step 3: Initialize a toolbar
                .toolbar(content: {
                    //Step 4: Declare one ToolBarItem for each navigation bar button and set the position
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button(action: {
                                addTask()
                        }) {
                            Image(systemName: "plus.circle")
                                .imageScale(.large)
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                                removeTask()
                        }) {
                            Image(systemName: "minus.circle")
                                .imageScale(.large)
                        }
                    }
                })
        }
    }
    
    func addTask() {
        let item = Item(id: items.count+1, name: "Sample Task")
        items.append(item)
    }
    
    func removeTask() {
        items.removeLast()
    }
}


I hope you enjoyed this tutorial! If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

One reply on “SwiftUI – How to create a Navigation Bar with custom items”

Leave a Reply

Your email address will not be published. Required fields are marked *

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount