SwiftUI collapsable lists inside multi-platform sidebar

Apple's desire to create a more cohesive experience across their platforms was clear this year at WWDC, SwiftUI is quickly positioning itself to take the wheel and drive multi-platform apps in the future.

The updated side bar behaviour and collapsable list is one step Apple has taken to move this incentive forward, with tailored experiences on iOS, iPadOS and MacOS all within the same control.

I built a sample app that demonstrates this behaviour in more detail, you can  download it here.

struct ListItem: Identifiable {
    var id = UUID()
    let name: String
    let iconName: String?
    let children: [ListItem]?
    
    init(name: String, iconName: String? = nil, children: [ListItem]? = nil) {
        self.name = name
        self.iconName = iconName
        self.children = children
    }
}

Here's a basic struct called ListItem which defines some parameters typical of a menu row, we're going to use this to generate the menu.

Next we'll quickly define the structure of our menu and submenus in an array.

let listItems: [ListItem] = [
    ListItem(name: "Email", iconName: "envelope", children: [
        ListItem(name: "Sub menu 1"),
        ListItem(name: "Sub menu 2"),
        ListItem(name: "Sub menu 3")
    ]),
    ListItem(name: "Calendar", iconName: "calendar"),
    ListItem(name: "Messages", iconName: "message", children: [
        ListItem(name: "Sub menu 4"),
        ListItem(name: "Sub menu 5"),
    ]),
]

We have three entries here; email has an icon and three children, Calendar has an icon and no children, messages has an icon and two children. Lastly we need to place these in a list and tell SwiftUI where to find our submenus.

var body: some View {
    List(listItems, children: \.children) { listItem in
        HStack {
            Image(systemName: listItem.iconName ?? "")
            Text(listItem.name)
        }
    }
}

Nice the children parameter in the constructor, this is a key path that tells swift where to find our children in the model, in this case it's our children variable so we pass in the  \.children key path.

And we have our collapsable list! To get the adaptable sidebar apple showed us at WWDC this year, wrap the above List in a NavigationView like so.

var body: some View {
    NavigationView {
        List(listItems, children: \.children) { listItem in
            HStack {
                Image(systemName: listItem.iconName ?? "")
                Text(listItem.name)
            }
        }
        .navigationTitle("Collapsable List")
    }
}

We can optionally add .listStyle(SidebarListStyle()) as a view modifier on List to make use of the new sidebar styling apple provides with iOS14, i've excluded it as i'm seeing inconsistent results in the current beta.

It really is that simple with SwitUI to build a sidebar with collapsable menus that adapts to multiple platforms, supports dark mode and makes use of SFSymbols.

Thanks for reading ✌️