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.


SwiftUi Sidebar Example with NavigationView 6
SwiftUi Sidebar Example with NavigationView 7



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 :