How to create sidebar in SwiftUI

Last updated Dec 22, 2021


In this SwiftUI example Tutorial we will cover what is Sidebar and how to create sidebar with SwiftUI. The Sidebar is a List that is embeded inside a Navigation View. You can customize the title and the layout will automatically adapt to the iPhone and iPad in portrait and landscape modes.

 

Let me walkthrough with an example to make some handy on creating Sibebar.

NavigationLink is used to have the navigating pages with destination.

 

SwiftUi Sidebar Example with NavigationView1

 

Here, we are creating a navigation page with simple Text. Its like creating UINavigationController with ViewController in UIKit.

Similarly, lets have other navigation page to have an Image.

SwiftUi Sidebar Example with NavigationView2

 

Image accepts the image name which we add in our Assets. So, when you tap on "Image" text, you will see the scenary image on the other page. 

Lets have these two navigation links in a list. So that we can see those link titles in sidebar (iPad) and in first screen (iPhone)

 

SwiftUi Sidebar Example with NavigationView3

 

iPhone Portrait and Landscape, will act as navigation controller flow like in UIKit

SwiftUi Sidebar Example with NavigationView 4  

SwiftUi Sidebar Example with NavigationView 5

 

In iPad both portrait and landscape, it shows up as sidebar with the same code but in landscape mode, you will notice that the default button will be shown up with NavigationView to navigate the sidebad.

 

Portrait
SwiftUi Sidebar Example with NavigationView 6
Landscape
SwiftUi Sidebar Example with NavigationView 7

 

Conclusion:

In this article, you learnt how to implement sidebar with NavigationView. By using this knowledge, you can create any custom sidebars.

 

Download Source code

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

46 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions