How it works
NavigationViewStyle is the protocol that abstracts the appearance and behavior of a NavigationView, letting you choose how its column or stack-based navigation is presented without rewiring the view hierarchy itself. SwiftUI ships a small set of conforming styles, and you select one rather than implement the protocol directly, so the framework can pick a platform-appropriate default while still honoring an explicit request. Reach for it when the automatic style doesn't match your layout — most often to force a single-column stack on wide or regular-width devices where a column-based interface would otherwise appear.
Wrap navigable content in a NavigationView
A style only has meaning when there is a navigation container to style. NavigationViewStyle describes the presentation of the enclosing
NavigationView, which here hosts aListofTextdestinations; the style attaches to that container, not to the rows inside it.Select a style with navigationViewStyle(_:)
You apply a conforming style through the
navigationViewStyle(_:)modifier, which takes any NavigationViewStyle value and threads it into the environment for the navigation view it modifies. In the example,.navigationViewStyle(.stack)is placed on theNavigationViewto override SwiftUI's automatic choice.Choose the stack presentation
The
.stackvalue resolves to StackNavigationViewStyle, the conformance that presents navigation as a single, full-width column with a push/pop stack. Requesting.stackkeeps theListtitled"Mail"occupying the whole view even on iPad or in regular-width layouts, instead of splitting into a sidebar-and-detail arrangement.Fall back to the automatic style
When you omit the modifier, SwiftUI uses DefaultNavigationViewStyle, which adapts to the device and size class — column-based where space allows, stacked where it doesn't. Naming
.stackexplicitly is how you opt out of that adaptation and pin the behavior, which is the central reason to touch NavigationViewStyle at all.Order the modifier with the rest of the chain
Because
navigationViewStyle(_:)returns some View, it composes with surrounding modifiers like.padding()in the example. Apply it to theNavigationViewso the style governs the whole container; modifiers placed inside theList, such as.navigationTitle("Mail"), configure content and are unaffected by the chosen style.
.navigationViewStyle(.stack) to .navigationViewStyle(.columns) (or remove the modifier entirely) and run on a wide layout to watch the same List shift from a full-width stack into a column-based sidebar-and-detail presentation.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 NavigationViewStyleDemo: View {
var body: some View {
NavigationView {
List {
Text("Inbox")
Text("Sent")
Text("Drafts")
}
.navigationTitle("Mail")
}
.navigationViewStyle(.stack)
.padding()
}
}