How it works
SidebarAdaptableTabViewStyle is a TabViewStyle that lets a single TabView present itself as a bottom tab bar in compact layouts and as a sidebar in regular ones, adapting automatically to the available space and platform. Reach for it when you want one navigation structure to feel native across iPhone, iPad, and Mac without maintaining separate hierarchies: the same set of tabs collapses into a tab bar where horizontal room is scarce and expands into a sidebar when the window can afford it. You apply it through the tabViewStyle(_:) modifier rather than instantiating it directly, using the .sidebarAdaptable shorthand for the shared style value.
Apply the style with .tabViewStyle(.sidebarAdaptable)
SidebarAdaptableTabViewStyle is selected by passing the type's static value to a TabView's style modifier. In the example,
.tabViewStyle(.sidebarAdaptable)hangs off theTabViewand tells SwiftUI to render the tabs adaptively instead of using the default tab-bar style. The.sidebarAdaptablemember is the conventional way to name the style; you rarely writeSidebarAdaptableTabViewStyle()by hand.Define each destination with Tab
The style operates on the
Tabvalues you declare inside theTabView. EachTabhere, such asTab("Home", systemImage: "house"), contributes one entry that the style can place either in the bottom bar or in the sidebar. The title andsystemImageyou give the tab become its label in both presentations, so the same"Browse"and"Settings"entries are reused as the layout adapts.Let the style choose tab bar versus sidebar
Unlike a fixed style, SidebarAdaptableTabViewStyle decides its presentation from the environment's size class and platform. With three tabs like
"Home","Browse", and"Settings", a compact iPhone shows a tab bar across the bottom, while an iPad or Mac window wide enough surfaces the same tabs as a leading sidebar, switching as the window resizes.Keep tab content independent of the style
The view a
Tabwraps, such as theText("Home").padding()body, is unaffected by SidebarAdaptableTabViewStyle, which governs only the chrome around the tabs. This separation means you can change the styling on the enclosingTabViewwithout touching each tab's content, and the same destinations render correctly whether reached from the bar or the sidebar.
Tab entries beyond the three shown, then run on an iPad-width window and a phone-width one to watch .tabViewStyle(.sidebarAdaptable) shift the same tabs between a sidebar and a bottom tab bar.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 SidebarAdaptableTabViewStyleDemo: View {
var body: some View {
TabView {
Tab("Home", systemImage: "house") {
Text("Home").padding()
}
Tab("Browse", systemImage: "square.grid.2x2") {
Text("Browse").padding()
}
Tab("Settings", systemImage: "gear") {
Text("Settings").padding()
}
}
.tabViewStyle(.sidebarAdaptable)
}
}