How to Make a Sidebar Menu in SwiftUI
Tags: swift, ios, swiftui
Published: 2020-09-22 23:07:53

---
title: How to Make a Sidebar Menu in SwiftUI
published: true
description: 
tags: #swift #ios #SwiftUI
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>Sidebars are really useful for navigating on bigger screen such as iPad's and the Mac's. We are going to take a look at how we can implement sidebars into a multiplatform SwiftUI app. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first thing we need to do is open a new Xcode project and create a new SwiftUI file. In this example we are going to name our file <strong>SideBar</strong>. Inside the <strong>Sidebar</strong> file we are going to replace the boilerplate code with the code below.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct Sidebar: View {
    var body: some View {
        NavigationView {
            List {
                Label("Books", systemImage: "book.closed")
                Label("Tutorials", systemImage: "list.bullet.rectangle")
                Label("Video Tutorials", systemImage: "tv")
                Label("Contacts", systemImage: "mail.stack")
                Label("Search", systemImage: "magnifyingglass")
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Code")
        }

    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":991,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-18-at-2.54.26-pm.png?w=395" alt="" class="wp-image-991"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In the above example we have created a simple list view with a few labels for our sidebar. Then we set our list with the sidebar style by simply adding the <strong>.listStyle(SidebarListStyle())</strong> modifier. We also added a navigation view so we can have a nice title label and add navigation to our sidebar labels in the future. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now we are going to run this code on our iPad simulator and rotate our simulator 90°. We can now see how our sidebar looks on a bigger iPad screen.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":998,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-ipad-8th-generation-2020-09-18-at-18.19.27.png?w=1024" alt="" class="wp-image-998"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's fill in the blank space of our example to see how this would look in a real app. First we will remove the <strong>NavigationView</strong> from our Sidebar.swift file. Then we will go into our <strong>ContentView</strong> file and add the following code below.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct ContentView: View {
    var body: some View {
        NavigationView {
            Sidebar()
            List(0 ..&lt; 20) {_ in
                Text("Book")
            }
            .navigationTitle("Book List")
        }
        
        
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Now when we run our application we get a mock book list next to our sidebar.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1001,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/simulator-screen-shot-ipad-8th-generation-2020-09-18-at-18.34.04.png?w=1024" alt="" class="wp-image-1001"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If we wanted to make this sidebar available on a Mac version of our app all we would need to do is add a few lines of code to our project. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first thing we will need to do is extract out the code in between the <strong>NavigationView</strong> curly braces. We can do this by holding down the command button and clicking on <strong>List</strong>. Next scroll down and select <strong>Extract subview</strong>. We will rename our subview <strong>SideBarContent</strong>. Now we need to add <strong>#if</strong>, <strong>#else</strong>, and <strong>#endif</strong> under our NavigationView. This will allow us to specify how we want our sidebar layout to look for the different operating systems. </p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct Sidebar: View {
    var body: some View {
        NavigationView {
            #if os(iOS)
            SideBarContent()
                .navigationTitle("Code")
            #else
            SideBarContent()
                .frame(minWidth: 200, idealWidth: 250,maxWidth: 300)
            #endif
        }

    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>The code above is allowing us to adapt our sidebar code to the different <strong>OS</strong>'s (Operating Systems) our app is going to run on. We need to separate our code because there are different  requirements for running our code on the different operating systems. In the first part of our <strong>#if</strong> statement we are checking to see if our <strong>OS</strong> is iOS and if it is we are then setting our sidebar with a navigation title. We need to add our <strong>.navigationTitle()</strong> modifier here because it is not supported in MacOS. In the <strong>#else</strong> statement all we need to do is set the minimum frame of our Mac app's window. Lastly we end our if statement with the <strong>#endif</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now we can run our sidebar code on both the iOS and MacOS (We need to have MacOS Big Sur installed on your Mac to run this on the Mac simulator).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's all there is too adding a native sidebar to a multiplatform SwiftUI app. Feel free to check out the example code here on my <a href="https://github.com/Tprezioso/SideBarSwiftUI">Github</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>💻👨🏻‍💻 Happy Coding! 💻👨🏻‍💻</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>  </p>
<!-- /wp:paragraph -->