How it works
ColumnNavigationViewStyle is a navigation view style that lays a NavigationView out as a series of side-by-side columns, where selecting an item in one column reveals its destination in the next. It is the multi-column counterpart to the stacked style, and it is what gives a sidebar-plus-detail experience on wide surfaces such as iPad and Mac while still collapsing gracefully on compact widths. Reach for it when you want a navigation hierarchy to read as adjacent panes rather than a single pushed stack. You apply it through the navigationViewStyle(_:) modifier rather than constructing it directly.
Conform to NavigationViewStyle
ColumnNavigationViewStyle is a struct that conforms to the NavigationViewStyle protocol, the type SwiftUI uses to describe how a NavigationView arranges and presents its content. Conforming to this protocol is what lets the style participate in the navigationViewStyle(_:) modifier and drive the column layout for the enclosing NavigationView.
Apply it with navigationViewStyle(_:)
You install the style by calling .navigationViewStyle(_:) on the NavigationView, passing the style value. In the example the chain ends with .navigationViewStyle(.columns), which adopts the column-based presentation for that NavigationView and everything it contains.
Use the .columns shorthand
Rather than writing ColumnNavigationViewStyle() by hand, SwiftUI exposes a .columns static accessor so the call site stays terse and reads like a choice of style. The leading-dot .columns in .navigationViewStyle(.columns) resolves to an instance of ColumnNavigationViewStyle.
Feed it a navigable hierarchy
The style only changes presentation, so it expects the NavigationView to contain the usual navigation building blocks: a List of NavigationLink rows whose destinations become the next column. Here the List holds the "Mailboxes", "Drafts", and "Sent" NavigationLink entries, each carrying a destination such as Text("Inbox") that the style surfaces in the adjacent pane.
Title the leading column
Because the first List becomes the leading column, modifiers like navigationTitle(_:) label that pane's header. The .navigationTitle("Mail") applied to the List names the sidebar column while the column style governs how the detail appears beside it.
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 ColumnNavigationViewStyleDemo: View {
var body: some View {
NavigationView {
List {
NavigationLink("Mailboxes", destination: Text("Inbox"))
NavigationLink("Drafts", destination: Text("Drafts"))
NavigationLink("Sent", destination: Text("Sent"))
}
.navigationTitle("Mail")
}
.navigationViewStyle(.columns)
.padding()
}
}