Navigation stuff in SwiftUI

Question

I'm trying to figure out how to use the navigation bar in SwiftUI

I want to put BarButtonItem and images inside the NavigationBar

I have been able to display the navigation bar and put titles

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

        }
        .navigationBarTitle(Text("Notes"))

    }
}

Mojtaba Hosseini · Accepted Answer · 2021-07-22T15:55:22.930

iOS 14

You should use the toolbar modifier:

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Cancel") { /* action */ }
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: { /* Actions */ }, label: {
            HStack {
                Image(systemName: "trash")
                Text("Delete")
            }
        })
        .foregroundColor(.red) // You can apply colors and other modifiers too
    }
}

_{Note 1: You can have ANY View there. (not only a Button) and also any modifiers}

_{Note 2: Both codes above and below will generate the same look items but with different approachs}

iOS 13 and above (deprecated but still works)

You should use .navigationBarItems() modifier. For example you can add Button or Image like this:

.navigationBarItems(
    leading: Button("Cancel") {
        // Actions
    },
    trailing: Button(action: {
        // Actions
    }, label: { Label("Delete", systemImage: "trash") }
    ).foregroundColor(.red) // You can apply colors and other modifiers too
)

Pro TIP

Always try to encapsulate each item in a separated struct, so your code will be simplified and very easy to replace with newer technologies. for example, take a look at this sample:

.navigationBarItems(
      leading: MyCustomButtonItem(),
      trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)

In normal swift writing there's a .editbutton that can be used to create edit buttons and do most of the actions for you. Is there something like that in SwiftUI? — Yuto, Jun 16 '19 at 03:07
@MojtabaHosseini I am following your code and trying to add UIBarButton something like this, .navigationBarTitle("\(task.label)") .navigationBarItems(trailing: NavigationButtonItem()) but I am unable to add action on button. Can you tell me what could be the possible problem? — Najam, Jan 31 '20 at 12:52

score 10 · Answer 2 · answered Jun 15 '19 at 06:22

.navigationBarItems() is the function you are looking for. You can specify a leading view, trailing view, or both. Within the view, you can specify horizontal and vertical stacks to add additional buttons.

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            }
            .navigationBarItems(leading: HStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            }, trailing: VStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            })
            .navigationBarTitle(Text("Notes"))
    }
}

score 1 · Answer 3 · answered Jun 16 '21 at 19:53

SwiftUI 2

In SwiftUI 2 / iOS 14 the navigationBarItems modifier is deprecated.

Instead we should use a toolbar with ToolbarItems.

NavigationView {
    List {
        // ...
    }
    .navigationTitle("Notes")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tap me") {
                // action
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            Image(systemName: "plus")
        }
    }
}

You can see the documentation for more ToolbarItemPlacements.

score 0 · Answer 4 · answered Apr 20 '22 at 23:36

Check the image here

The toolbar() modifier lets us add single or multiple bar button items to the leading and trailing edge of a navigation view, as well as other parts of our view if needed. These might be tappable buttons, but there are no restrictions – you can add any sort of view.

var body: some View {
    NavigationView {
        ScrollView {
            VStack{
                
            }//: VStack
        }//: Scroll
        .navigationTitle("Settings")
        .toolbar(content: {
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "xmark")
                }
            }
        })
        .padding()
    }//: Navigation
}

score -1 · Answer 5 · answered Jul 14 '20 at 07:25

-1

put this from parentViewController

NavigationLink(destination: NotesListView())

answered Jul 14 '20 at 07:25

Khushal iOS

303
2
12

Navigation stuff in SwiftUI

5 Answers5

iOS 14

iOS 13 and above (deprecated but still works)

SwiftUI 2

Linked