How to create Navigation Bar in SwiftUI? Check here!

Let see how to create navigation bar in SwiftUI.

In SwiftUI there is NavigationView option to create the Navigation bar. We will start with the simple title.

	NavigationView {
	Text("Hello, navigation!").padding()
	.navigationBarTitle(Text("SwiftUI"), displayMode: .inline)
	}

view raw SnippetNavigationTitle.swift hosted with ❤ by GitHub

This will add title text. Here inline means regular navigation bar. You can use automatic or large for large navigation titles.

Add Bar Button Items

From navigationBarItems options we can add leading(left) and trailing(right) bar button items. In this example I have added system buttons as well as simple button with text.

	NavigationView {
	Text("Hello, navigation!").padding()
	.navigationBarTitle(Text("SwiftUI"), displayMode: .inline)
	.navigationBarItems(leading:
	HStack {
	Button(action: {
	print("Apple button tapped!")
	}) {
	Image(systemName: "applelogo")
	}.padding()
	Button("About") {
	print("About button tapped!")
	}
	}, trailing:
	HStack {
	Button(action: {
	print("Info button tapped!")
	}) {
	Image(systemName: "info")
	}
	}
	)
	}

view raw SnippetNavigationBar.swift hosted with ❤ by GitHub

As you can see in the snippet I have added two buttons on left and one info button on right.

Cheers!

Conclusion

So many things are there to explore in SwiftUI, Xcode 12, iOS 14 and macOS Big Sur. If I get time, I will keep posted!

I am posting tweets/retweets about iOS everyday.

I hope you learned something. If you did, feel free to share this article with a friend or on social media. Let me know if you have any questions, comments or feedback – either via Twitter or email.

Stay Safe At Home. Learn Something New. Share To The World.
Happy Coding 🙂