--- title: "NavigationSplitView | Explore SwiftUI" description: "Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples." canonical_url: "https://exploreswiftui.com/library/navigation/navigationsplitview" meta: author: "Explore SwiftUI" "og:description": "Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_NavigationSplitView%2Cdescription_Creates%2Ba%2Btwo-column%2Bnavigation%2Bsplit%2Bview.%2Ccategory_Navigation%2Cimage_~L2FwaS9pbWFnZXMvMjQxL3ZhcmlhbnRzLzE5ODM~dj0xNzkxMzc5NzA1NTQ0JnI9MiZ3PTEyODAmcT04NSZmPWpwZWc%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L25hdmlnYXRpb24vbmF2aWdhdGlvbnNwbGl0dmlldyI%2Cs_ka9y2Yeb4Q5sWB0o.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "NavigationSplitView | Explore SwiftUI" "twitter:description": "Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_NavigationSplitView%2Cdescription_Creates%2Ba%2Btwo-column%2Bnavigation%2Bsplit%2Bview.%2Ccategory_Navigation%2Cimage_~L2FwaS9pbWFnZXMvMjQxL3ZhcmlhbnRzLzE5ODM~dj0xNzkxMzc5NzA1NTQ0JnI9MiZ3PTEyODAmcT04NSZmPWpwZWc%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L25hdmlnYXRpb24vbmF2aWdhdGlvbnNwbGl0dmlldyI%2Cs_ka9y2Yeb4Q5sWB0o.png" "twitter:title": "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=241) [ iPhone](https://exploreswiftui.com/iphone?element=241) # **NavigationSplitView** Creates a two-column navigation split view. ![NavigationSplitView - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/241/variants/1983?v=1791379705544&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 } detail: { Color.orange } ``` ### **Found an issue or have a suggestion?** Created: September 23, 2026Updated: October 7, 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. ![Content NavigationSplitView - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/242/variants/1528?v=1790273533713&r=2&w=412&q=75&f=webp) ### **Content NavigationSplitView** Creates a three-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/) ![Role Button With Default Label - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/134/variants/424?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Role Button With Default Label** Creates a button that displays a default label. ![AccessoryLinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/45/variants/257?v=1790073478842&r=2&w=412&q=75&f=webp) ### **AccessoryLinearCapacityGaugeStyle** A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases ![GroupBox With Label - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/28/variants/195?v=1790073478842&r=2&w=412&q=75&f=webp) ### **GroupBox With Label** A GroupBox with Label ![Multiple Sources Toggle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/209/variants/633?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Multiple Sources Toggle** Creates a toggle that updates the selected property for all sources. Once toggled, all sources will have the same value. ![Pinned Toolbar Item Placement - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/236/variants/527?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Pinned Toolbar Item Placement** A placement that pins the item to the trailing edge of the toolbar. ![MenuPickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/180/variants/592?v=1790073478842&r=2&w=412&q=75&f=webp) ### **MenuPickerStyle** A picker style that presents the options as a menu when the user presses a button, or as a submenu when nested within a larger menu. ![SliderTickContentForEach - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/133/variants/379?v=1790073478842&r=2&w=412&q=75&f=webp) ### **SliderTickContentForEach** A type of slider content that creates content by iterating over a collection. ![Picker Section - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/178/variants/544?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Picker Section** A Section inside a Picker ```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/navigationsplitview#webpage","@type":"WebPage","dateModified":"2026-10-07T13:28:25.558Z","datePublished":"2026-09-23T19:18:51.447Z","description":"Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples.","name":"NavigationSplitView","url":"https://exploreswiftui.com/library/navigation/navigationsplitview","breadcrumb":{"@id":"https://exploreswiftui.com/library/navigation/navigationsplitview#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/navigation/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/navigationsplitview#article","dateModified":"2026-10-07T13:28:25.558Z","datePublished":"2026-09-23T19:18:51.447Z","description":"Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples.","headline":"NavigationSplitView","inLanguage":"en-US","name":"NavigationSplitView","thumbnailUrl":"https://exploreswiftui.com/api/images/241/variants/1983?v=1791379705544&r=2","url":"https://exploreswiftui.com/library/navigation/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/navigationsplitview#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/navigation/navigationsplitview#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/navigationsplitview/init(sidebar:detail:)","codeSampleType":"full example","description":"Creates a two-column navigation split view. Learn how to use NavigationSplitView in SwiftUI with visual code examples.","name":"NavigationSplitView SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"NavigationSplitView {\n Color.blue\n} detail: {\n Color.orange\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Navigation"},{"@type":"Thing","name":"NavigationSplitView"}]},{"@id":"https://exploreswiftui.com/library/navigation/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":"NavigationSplitView","item":"https://exploreswiftui.com/library/navigation/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/241/variants/1983?v=1791379705544&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/241/variants/1983?v=1791379705544&r=2"}]} ```