How it works
SidebarListStyle is the list style that gives a List the appearance and behavior of a navigation sidebar — the kind of source list you see on the leading edge of an app. It renders sections as collapsible, disclosure-driven groups with the inset spacing, hierarchy, and platform chrome appropriate for a sidebar rather than a flat scrolling list. Reach for it whenever a List acts as the primary navigation surface of a multi-column layout, such as the root column of a NavigationSplitView.
Apply the style with listStyle(.sidebar)
You rarely construct SidebarListStyle directly; instead you attach it to a List through the listStyle(_:) modifier, passing the static member .sidebar that resolves to a SidebarListStyle value. In the example,
.listStyle(.sidebar)is the single modifier that converts the plainListinto a sidebar presentation.Group navigation items with Section
SidebarListStyle reads each
Sectionas a distinct, collapsible group and draws it with a header and disclosure affordance. Here theSection("Favorites")andSection("Library")blocks become the two named groups whose headers the sidebar style styles and lets the reader expand or collapse.Let the style format row content
Rows inside the styled List inherit the sidebar's inset layout, spacing, and selection chrome, so standard content like Label adopts the sidebar look without extra modifiers. The
Label("Home", systemImage: "house")rows pick up the sidebar's icon-plus-title alignment purely because they sit inside the.listStyle(.sidebar)list.Conform through the ListStyle protocol
SidebarListStyle conforms to ListStyle, which is what makes it a valid argument to listStyle(_:) and interchangeable with siblings such as .plain, .grouped, or .inset. Swapping the
.sidebarmember in.listStyle(.sidebar)for any other ListStyle value reshapes the sameListwithout touching its content.
.listStyle(.sidebar) to .listStyle(.plain) and watch the collapsible, inset sidebar groups flatten into an ordinary edge-to-edge list.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct SidebarListStyleDemo: View {
var body: some View {
List {
Section("Favorites") {
Label("Home", systemImage: "house")
Label("Starred", systemImage: "star")
}
Section("Library") {
Label("Recents", systemImage: "clock")
Label("Tags", systemImage: "tag")
}
}
.listStyle(.sidebar)
}
}