Skip to content

SwiftUI: NavigationView

Navigation View is just another name of Navigation Bar in SwiftUI. And the only difference is that Navigation View represents the whole view instead of just a top navigation bar.

A view for presenting a stack of views representing a visible path in a navigation hierarchy.

Apple Documentation

In this tutorial, you’ll learn what it takes to build navigation view in SwiftUI. You’ll learn:

  • How to build navigation view from scratch.
  • How to customize the navigation bar items.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Navigation View

Remember that Navigation View is totally different with Navigation Bar in UIKit. Navigation View in SwiftUI represents the whole view.

By adding the following code, you’ll see the effect of the code.

However, you don’t quite see the title because you will have to include .navigationBarTitle. Simply insert the following code inside NavigationView. By including a list, hopefully could tell the difference. To include a list, check out my other post on List.

If you are not a fan of large title, you could remove it simply using the displayMode to configure the mode that you would like.

Hiding Navigation Bar

If you do not want the top bar to show, you could hide is using .navigationBarHidden.

Navigation Bar Items

You can even include either an image or a text as the Navigation Bar Item. Depending on your usage, you may include either left or right or both bar items. The following code displays both bar item in text and images.

Back Button

In cases where you would like to disable the back button from showing when moving from one screen to another. You can always opt for .navigationBarBackButtonHidden(bool).

You may even customize your own back button to your own design. You can include both text and images in a stack to achieve this.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

One Comment

  1. Pierre Pierre

    Great tutorial, very clear and concise.

    I tried changing the back button like you showed and I don’t see any of my changes even though I applied the modifier on the Navigation View.

    Any hint?

Leave a Reply

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

Copyright © DaddyCoding 2017-2020