--- title: "Content NavigationSplitView | Explore SwiftUI" description: "Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples." canonical_url: "https://exploreswiftui.com/library/navigation/content-navigationsplitview" meta: author: "Explore SwiftUI" "og:description": "Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Content%2BNavigationSplitView%2Cdescription_Creates%2Ba%2Bthree-column%2Bnavigation%2Bsplit%2Bview.%2Ccategory_Navigation%2Cimage_~L2FwaS9pbWFnZXMvMjQyL3ZhcmlhbnRzLzE1Mjg~dj0xNzkwMjczNTMzNzEzJnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMzNweCAwcHggMHB4IDMzcHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L25hdmlnYXRpb24vY29udGVudC1uYXZpZ2F0aW9uc3BsaXR2aWV3Ig%2Cs_6c3loTb8k_EwFzOn.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Content NavigationSplitView | Explore SwiftUI" "twitter:description": "Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Content%2BNavigationSplitView%2Cdescription_Creates%2Ba%2Bthree-column%2Bnavigation%2Bsplit%2Bview.%2Ccategory_Navigation%2Cimage_~L2FwaS9pbWFnZXMvMjQyL3ZhcmlhbnRzLzE1Mjg~dj0xNzkwMjczNTMzNzEzJnI9MiZ3PTY0MCZoPTQ4MCZmPXBuZw%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMzNweCAwcHggMHB4IDMzcHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L25hdmlnYXRpb24vY29udGVudC1uYXZpZ2F0aW9uc3BsaXR2aWV3Ig%2Cs_6c3loTb8k_EwFzOn.png" "twitter:title": "Content NavigationSplitView | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone Duo](https://exploreswiftui.com/duo?element=242) # **Content NavigationSplitView** Creates a three-column navigation split view. ![Content NavigationSplitView - Preview Not Available](https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 9.0+ tvOS 16.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` NavigationSplitView { Color.blue } content: { Color.indigo } detail: { Color.orange } ``` ### **Found an issue or have a suggestion?** Created: September 23, 2026Updated: September 24, 2026 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More Navigation Components ** [**View all **](https://exploreswiftui.com/library/navigation) ![Toolbar Title Alignment - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/258/variants/2111?v=1793542963212&r=2&w=412&q=75&f=webp) ### **Toolbar Title Alignment** Sets the preferred alignment of the navigation bar’s title. The navigation bar resolves the alignment of its title automatically based on context, and toolbar roles. Use this modifier to override that resolution. ![Preferred Top Column - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/256/variants/1967?v=1791379474964&r=2&w=412&q=75&f=webp) ### **Preferred Top Column** Controls which column appears on top of the stack when NavigationSplitView collapses into a single stack in certain contexts, such as on iPhone, when iPhone Duo is closed, or on Apple Watch. By default, the sidebar appears on top. In this case, the detail column does instead. ![Hide Sidebar Toggle - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/255/variants/1925?v=1791377398818&r=2&w=412&q=75&f=webp) ### **Hide Sidebar Toggle** Removes the sidebar toggle toolbar item a NavigationSplitView adds by default. ![NavigationSplitView - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/241/variants/1983?v=1791379705544&r=2&w=412&q=75&f=webp) ### **NavigationSplitView** Creates a two-column navigation split view. ![Navigation Subtitle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/94/variants/289?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Subtitle** Configures the view’s subtitle for purposes of navigation, using a localized string ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![ControlSize - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/97/variants/303?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ControlSize** A control version that is the default size ![VisionOS background materials - visionOS - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/260/variants/2143?v=1793707679045&r=2&w=412&q=75&f=webp) ### **VisionOS background materials** All background materials on visionOS ![App Store Overlay - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/224/variants/269?v=1790073478842&r=2&w=412&q=75&f=webp) ### **App Store Overlay** Presents a StoreKit overlay when a given condition is true. ![PageTabViewStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/161/variants/685?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PageTabViewStyle** A TabViewStyle that displays a paged scrolling TabView. ![CheckboxToggleStyle - macOS - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/212/variants/622?v=1790073478842&r=2&w=412&q=75&f=webp) ### **CheckboxToggleStyle** A toggle style that displays a checkbox followed by its label. ![Default Collapsed Tab Section - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/234/variants/341?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Default Collapsed Tab Section** Sets the default expansion state for the section containing this tab to collapsed when displayed in the sidebar. ![Prioritize Sheet Content Scrolling - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/141/variants/466?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Prioritize Sheet Content Scrolling** Configures the behavior of swipe gestures on a presentation. PresentationContentInteraction.scrolls prioritizes scrolling the content over resizing the sheet. ![Sheet Size - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/137/variants/432?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Sheet Size** Sets the available detents for the enclosing sheet. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#webpage","@type":"WebPage","dateModified":"2026-09-24T18:12:13.728Z","datePublished":"2026-09-23T20:43:03.143Z","description":"Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples.","name":"Content NavigationSplitView","url":"https://exploreswiftui.com/library/navigation/content-navigationsplitview","breadcrumb":{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/navigation/content-navigationsplitview"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#article","dateModified":"2026-09-24T18:12:13.728Z","datePublished":"2026-09-23T20:43:03.143Z","description":"Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples.","headline":"Content NavigationSplitView","inLanguage":"en-US","name":"Content NavigationSplitView","thumbnailUrl":"https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2","url":"https://exploreswiftui.com/library/navigation/content-navigationsplitview","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/navigationsplitview/init(sidebar:content:detail:)","codeSampleType":"full example","description":"Creates a three-column navigation split view. Learn how to use Content NavigationSplitView in SwiftUI with visual code examples.","name":"Content NavigationSplitView SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"NavigationSplitView {\n Color.blue\n} content: {\n Color.indigo\n} detail: {\n Color.orange\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Navigation"},{"@type":"Thing","name":"Content NavigationSplitView"}]},{"@id":"https://exploreswiftui.com/library/navigation/content-navigationsplitview#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Navigation","item":"https://exploreswiftui.com/library/navigation","position":2},{"@type":"ListItem","name":"Content NavigationSplitView","item":"https://exploreswiftui.com/library/navigation/content-navigationsplitview","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2"}]} ```