How it works
DoubleColumnNavigationViewStyle is a concrete NavigationViewStyle that arranges a NavigationView's content as two side-by-side columns: a primary column holding the root view, and a detail column that displays the destination of whatever is currently selected. Reach for it when you want the classic master-detail layout — a persistent sidebar of choices next to a content pane — rather than letting the system collapse navigation into a single stack. You apply it through the navigationViewStyle(_:) modifier, and SwiftUI honors it where the available space supports two columns, falling back gracefully when it doesn't.
Give the style a NavigationView with two children
DoubleColumnNavigationViewStyle reads the structure of its NavigationView: the first child becomes the primary (sidebar) column and the second becomes the initial detail column. In the example the
NavigationViewcontains aListof fruits followed by a placeholderText("Select a fruit"), which is exactly the two-view shape the style expects.Apply it with navigationViewStyle(_:)
The style takes effect only when you attach it to the navigation hierarchy through the
navigationViewStyle(_:)modifier, passing an instance of the style. Here.navigationViewStyle(DoubleColumnNavigationViewStyle())is applied to the wholeNavigationView, opting the hierarchy into the two-column presentation.Construct it with its no-argument initializer
DoubleColumnNavigationViewStyle is a value type you create with a plain
DoubleColumnNavigationViewStyle()— it has no configuration parameters, since all of its behavior is fixed and the layout is driven by the views you supply. The example instantiates it inline directly inside the modifier call.Drive the detail column with NavigationLink
Selections in the primary column populate the detail column: each
NavigationLink(fruit)declares a destination that the style renders in the second column instead of pushing onto a stack. Tapping a row swapsText("Select a fruit")for the link's destination, theText("You picked \(fruit)")view.
Text("Select a fruit") view from the NavigationView so only the List remains, and watch how DoubleColumnNavigationViewStyle has no placeholder detail content to show until a row is selected.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 DoubleColumnNavigationViewStyleDemo: View {
let fruits = ["Apple", "Banana", "Cherry"]
var body: some View {
NavigationView {
List(fruits, id: \.self) { fruit in
NavigationLink(fruit) {
Text("You picked \(fruit)")
.font(.title2)
.padding()
}
}
.navigationTitle("Fruits")
Text("Select a fruit")
.foregroundColor(.secondary)
.padding()
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}