How to customize the navigation bar with buttons and graphics using SwiftUI&#x27;s NavigationView is the topic of this article. To do so, we&#x27;ll make use of the navigationBarItems modification, which allows you to choose which items appear at the start and end of the bar (e.g., buttons, images or other SwiftUI views). Items with more prominence will be shown on the left side of the screen, while those with less prominence will appear on the right.

The following code will add an Edit button to the end of the navigation bar:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text(&quot;List of SwiftUI tutorials&quot;)
            .navigationBarTitle(&quot;Tutorials&quot;)
            .navigationBarItems(trailing:
                Button(action: {
                    print(&quot;Edit button pressed...&quot;)
                }) {
                    Text(&quot;Edit&quot;)
                }
            )
        }
    }
}
&#96;&#96;&#96;

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;1.png?alt=media&amp;token=e55215eb-b96f-488a-9693-63f6a81a5d4e)

The navigationBarItems class&#x27;s lagging edit button in the main menu

Create a primary Edit button for the toolbar:

&#96;&#96;&#96;javascript
.navigationBarItems(leading:
    Button(action: {
        print(&quot;Edit button pressed...&quot;)
    }) {
        Text(&quot;Edit&quot;)
    }
)
&#96;&#96;&#96;

Insert a button with a trailing picture using an SF Symbol onto the menu bar:

&#96;&#96;&#96;javascript
.navigationBarItems(trailing:
    Button(action: {
        print(&quot;User icon pressed...&quot;)
    }) {
        Image(systemName: &quot;person.crop.circle&quot;).imageScale(.large)
    }
)
&#96;&#96;&#96;

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;2.png?alt=media&amp;token=fd0cb059-4e21-4edb-8137-a5d52ac2b058)

Using navigationBarItems, add a lagging image button to the navigation bar.

HStack makes it easy to extend your menu bar with additional tacked-on buttons:

&#96;&#96;&#96;javascript
.navigationBarItems(trailing:
    HStack {
        Button(action: {
            print(&quot;Reload button pressed...&quot;)
        }) {
            Text(&quot;Reload&quot;)
        }
 Button(action: {
            print(&quot;Edit button pressed...&quot;)
        }) {
            Text(&quot;Edit&quot;)
        }
    }
}
&#96;&#96;&#96;

This is how you can implement navigation in SwiftUI. Cheers!

How to Add Button to Navigation Bar in SwiftUI

About

Legal

Products

Resources

Category: