How it works
TabSection groups a set of related Tab values under a shared, titled heading inside a TabView. Reach for it when a flat list of tabs no longer communicates structure — for example, when several destinations belong to the same area of your app and you want them presented together rather than as peers. In tab presentations that can show a sidebar, the section title becomes a visible group header and its tabs collapse beneath it, giving the interface a hierarchy that a plain row of tabs cannot. It is a content-organizing container, so you place it directly among the other tabs in the TabView builder.
Declare a TabSection with a header
Initialize
TabSectionwith a title and a content closure that produces the grouped tabs. HereTabSection("Library")introduces a group whose header reads "Library", visually separating it from the top-levelTab("Home", ...)that sits beside it.Nest Tab values inside the section
The section's closure holds the
Tabentries that belong to the group; each still carries its own label, image, and selection value. The "Library" section wrapsTab("Songs", ...)andTab("Albums", ...), so both appear indented under the shared heading instead of as independent tabs.Place the section inside a TabView
TabSectionis meaningful only as a child of aTabView, where it participates in the same selection model as ungrouped tabs. The surroundingTabView(selection: $selection)drives which destination is active, and the section's tabs bind to it through theirvaluearguments ("songs","albums") exactly asTab("Home", ..., value: "home")does.Opt into a style that surfaces the grouping
The section header and collapsing behavior appear in tab styles that can present a sidebar. Applying
.tabViewStyle(.sidebarAdaptable)lets the layout adapt to a sidebar where "Library" is shown as a heading over its tabs; in a compact, bar-only presentation the grouping has nothing to render against.
TabSection("Playlists") { ... } containing a couple more Tab entries alongside the existing "Library" section to watch the sidebar render two distinct, independently headed groups.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 TabSectionDemo: View {
@State private var selection = "home"
var body: some View {
TabView(selection: $selection) {
Tab("Home", systemImage: "house", value: "home") {
Text("Home").padding()
}
TabSection("Library") {
Tab("Songs", systemImage: "music.note", value: "songs") {
Text("Songs").padding()
}
Tab("Albums", systemImage: "square.stack", value: "albums") {
Text("Albums").padding()
}
}
}
.tabViewStyle(.sidebarAdaptable)
}
}