How to get translucent lists on macOS

Paul Hudson @twostraws August 22nd 2021

Updated for Xcode 13.0

Updated for iOS 15

One subtle but important feature of macOS is the way sidebars are automatically made slightly transparent when a window is active, then made opaque when the window moves to the background – it’s a small hint to the user which window is active, but also lets a little of their background show through, giving them a little context of their environment.

SwiftUI allows us to create these translucent sidebars using the listStyle() modifier on List, passing in .sidebar (or SidebarListStyle() for Xcode 12) like this:

NavigationView {
    List(1..<51) {
         Text("\($0)")
    }
    .listStyle(.sidebar)
}

Important: If you’re using Xcode 12 you need to use SidebarListStyle() rather than .sidebar.

There’s nothing stopping you from using that with any list, but the clue is in the name: it’s specifically designed for lists that are shown on the side of your main window, as you can see in Xcode’s navigators.

Note: on iOS and iPadOS, .sidebar does not provide translucent background, but does affect the cell styling.

An inactive macOS window with an opaque sidebar, an active macOS window with a translucent sidebar, an iPad with a list, and an iPhone with a list. The iPad and iPhone lists have gray backgrounds and no list-item separators.

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to get translucent lists on macOS

Similar solutions…