Skip to main content

How to customize the display mode of NavigationSplitView

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to customize the display mode of NavigationSplitView 관련

SwiftUI by Example

Back to Home

How to customize the display mode of NavigationSplitView | SwiftUI by Example

How to customize the display mode of NavigationSplitView

Updated for Xcode 15

SwiftUI's NavigationSplitView has three options to control how sidebars are displayed, each of which can be adjusted using the navigationSplitViewStyle() modifier.

The first is .prominentDetail, which tells SwiftUI you want the detail view to retain its full size at all times – the sidebar and content view will slide over the detail view, rather than pushing it to one side or squeezing it smaller:

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } content: {
            Text("Content")
        } detail: {
            Text("Detail")
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}

Download this as an Xcode projectopen in new window

The second option is .balanced, which will reduce the size of your detail view as the sidebar or content bar are shown – just switch .prominentDetail to .balanced, like this:

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } content: {
            Text("Content")
        } detail: {
            Text("Detail")
        }
        .navigationSplitViewStyle(.balanced)
    }
}

Download this as an Xcode projectopen in new window

The default is .automatic, which will vary according to the platform – at the time of writing, on iPhone it becomes prominentDetail, and on iPad it becomes .balanced.

Similar solutions…
How to customize a view's width in NavigationSplitView | SwiftUI by Example

How to customize a view's width in NavigationSplitView
How to create a two-column or three-column layout with NavigationSplitView | SwiftUI by Example

How to create a two-column or three-column layout with NavigationSplitView
How to control which NavigationSplitView column is shown in compact layouts | SwiftUI by Example

How to control which NavigationSplitView column is shown in compact layouts
How to display solid shapes | SwiftUI by Example

How to display solid shapes
How to display a bottom sheet | SwiftUI by Example

How to display a bottom sheet

이찬희 (MarkiiimarK)
Never Stop Learning.