Skip to content
Join us for Free for Full Access to site Content

NavigationView – SwiftUI

How to create a NavigationView in SwiftUI

Let’s create a simple NavigationView using SwiftUI.

        NavigationView {
            List {
                Text("Item1")
                Text("Item2")
                Text("Item3") }.navigationBarTitle(Text("ContentView"))
        }

How to change the style of a navigationBarTitle to inline?

By default the navigationBarTitle is set to Large. to set it to inline just set the displayMode parameter to .inline:

 NavigationView {
            List {
                Text("Item1")
                Text("Item2")
                Text("Item3") }.navigationBarTitle(Text("ContentView"), displayMode: .inline)
        }

How to show a NavigationLink inside a NavigationView?

 struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            
            NavigationLink(destination: DetailView()) {
                
                Text("Tap Me")
            }.navigationBarTitle(Text("ContentView"))
            
        }
        
    }
    
}

struct DetailView: View {
    
    var body: some View {
        
        Text("Hello, I'm a Detail View")
        
    }
    
}

Find more about navigationLink here.

How to change a navigationViewStyle of a NavigationView?

If you want to run your app on iPad you should know about a navigationViewStyle. Set it to DoubleColumnNavigationViewStyle() if you want a Split view style.

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            
            NavigationLink(destination: DetailView()) {
                
                Text("Tap Me")
            }.navigationBarTitle(Text("ContentView"))
            
            Text("Hello, I'm a Detail View")
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
        
        
    }
    
}

If you want it to show in a One-View way on iPad, use the StackNavigationViewStyle() instead. Check it on canvas or in an iPad simulator.

.navigationViewStyle(StackNavigationViewStyle())

Learn more about SwiftUI using SwiftUI Tutorials by the AppMakers

If anything will change in the future, it is OK, you can always check the official documentation.

NavigationView Documentation

Leave a comment to Submit the NEW and USEFUL code related to the topic of this post.
Submit a brief and useful code only.

Back To Top
Search

Get Latest App Development News, Tips and Tutorials

* indicates required


Send this to a friend