# Section and Navigation Link in SwiftUI

The Settings app is an essential part of the iOS ecosystem, allowing users to configure their devices and manage their apps. With SwiftUI, it's easier than ever to create beautiful and intuitive user interfaces for iOS apps. In this blog post, we'll show you how to use SwiftUI to create a Settings app UI that looks and feels just like the real thing. We'll walk you through the process of creating the UI step-by-step, so you can follow along and create your own Settings app UI in no time. So, let's get started!

The code in this post is available [here](https://github.com/xavier7t/iOSDevX/blob/main/iOSDevX/202305-May%202023/DemoSettingsView20230505.swift).

If you like my posts, 😚consider tipping me at [buymeacoffee.com/xavierios](http://buymeacoffee.com/xavierios)

### **Set up the basic view structure**

In the `SettingsView` struct, start by creating a `NavigationView` and a `List` view inside it. The `List` will contain the different sections and settings items.

```swift
struct SettingsView: View {
    var body: some View {
        NavigationView {
            List {
                // settings sections and items will go here
            }
            .listStyle(GroupedListStyle())
            .navigationTitle("Settings")
        }
    }
}
```

Here, we're also adding a `GroupedListStyle` to the `List` and setting the navigation title to "Settings".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683263052867/e94e6667-6a07-442a-8713-ba9d3bb2d7ce.png align="center")

### **Add the settings sections and items**

Inside the `List`, create the different `Section` views for each group of settings items. Then, add `NavigationLink` views inside each section to represent the different settings items.

```swift
    struct SettingsView: View {
        var body: some View {
            NavigationView {
                List {
                    Section(header: Text("GENERAL")) {
                        NavigationLink(destination: Text("Do Not Disturb")) {
                            HStack {
                                Image(systemName: "moon")
                                Text("Do Not Disturb")
                            }
                        }
                        NavigationLink(destination: Text("Display & Brightness")) {
                            HStack {
                                Image(systemName: "textformat.size")
                                Text("Display & Brightness")
                            }
                        }
                        NavigationLink(destination: Text("Sounds & Haptics")) {
                            HStack {
                                Image(systemName: "speaker.2")
                                Text("Sounds & Haptics")
                            }
                        }
                        NavigationLink(destination: Text("Screen Time")) {
                            HStack {
                                Image(systemName: "hourglass")
                                Text("Screen Time")
                            }
                        }
                    }
                    Section(header: Text("ACCOUNTS")) {
                        NavigationLink(destination: Text("iCloud")) {
                            HStack {
                                Image(systemName: "icloud")
                                Text("iCloud")
                            }
                        }
                        NavigationLink(destination: Text("Password & Security")) {
                            HStack {
                                Image(systemName: "lock")
                                Text("Password & Security")
                            }
                        }
                    }
                    Section(header: Text("ABOUT")) {
                        NavigationLink(destination: Text("General")) {
                            HStack {
                                Image(systemName: "info.circle")
                                Text("General")
                            }
                        }
                        NavigationLink(destination: Text("Software Update")) {
                            HStack {
                                Image(systemName: "arrow.up.right.circle")
                                Text("Software Update")
                            }
                        }
                    }
                }
                .listStyle(GroupedListStyle())
                .navigationTitle("Settings")
            }
        }
    }
```

Here, we're using `header` to add a title to each section, and `destination` to specify the detail view that should be shown when the user taps on the `NavigationLink`. We're also using a `HStack` to combine an image (using the `Image` view with a system name) and a text label (using the `Text` view).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683263188610/f3b40eb1-b702-49a7-a107-502379303da0.png align="center")

# ListStyle

We can make the the section rows more like rounded rectangles by changing the value of the view modifier `.listStyle` from `GroupedListStyle()` to `InsetGroupedListStyle()`, or even simpler `.insetGrouped`.

```swift
.listStyle(.insetGrouped)
```

or

```swift
.listStyle(InsetGroupedListStyle())
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683263393931/dacd04ea-3181-4884-ab97-2cbf69d9eab1.png align="center")

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!