NavigationSplitView
NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
Examples
Default
Preview unavailable for this example in the static docs build.
Show code
<NavigationSplitView
sidebar={(
<List>
<Text>Inbox</Text>
<Text>Favorites</Text>
</List>
)}
content={(
<VStack spacing={12}>
<Text>Selected group</Text>
<NavigationLink destination={() => <Text>Details</Text>}>Open thread</NavigationLink>
</VStack>
)}
detail={<Text>Choose a message to inspect.</Text>}
/>Compact Column
Preview unavailable for this example in the static docs build.
Show code
<NavigationSplitView
compact
defaultCompactColumn="sidebar"
sidebar={<Text>Sidebar focus</Text>}
content={<Text>Content</Text>}
detail={<Text>Detail</Text>}
/>Column Visibility
Preview unavailable for this example in the static docs build.
Show code
<NavigationSplitView
columnVisibility="doubleColumn"
sidebar={<Text>Sidebar</Text>}
content={<Text>Content</Text>}
detail={<Text>Detail</Text>}
/>Column Visibility
Preview unavailable for this example in the static docs build.
Show code
<NavigationSplitView
defaultColumnVisibility="detailOnly"
sidebar={<Text>Sidebar</Text>}
content={<Text>Content</Text>}
detail={<Text>Detail only focus</Text>}
/>API
| Prop | Type | Required | Description |
|---|---|---|---|
sidebar | ReactNode | Yes | Sidebar column content. |
content | ReactNode | No | Optional middle column content. |
detail | ReactNode | Yes | Detail column content. |
compact | boolean | No | Whether the layout should collapse to compact presentation. Default: false |
compactColumn | 'sidebar' | 'content' | 'detail' | No | Which column remains visible in compact presentation. Default: 'detail' |
defaultCompactColumn | 'sidebar' | 'content' | 'detail' | No | Initial compact column for uncontrolled usage. Default: 'detail' |
onCompactColumnChange | (column: 'sidebar' | 'content' | 'detail') => void | No | Called when the compact column is normalized by the component. |
columnVisibility | 'automatic' | 'all' | 'doubleColumn' | 'detailOnly' | No | Controls which columns remain visible in regular presentation. Default: 'automatic' |
defaultColumnVisibility | 'automatic' | 'all' | 'doubleColumn' | 'detailOnly' | No | Initial regular-layout column visibility for uncontrolled usage. Default: 'automatic' |
Inherits additional props from IBaseComponent.
Overview
NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
Compact Column
Use defaultCompactColumn or the controlled compactColumn prop to decide which column remains visible in compact layouts:
Column Visibility
Use defaultColumnVisibility for uncontrolled regular layouts, or columnVisibility when external state owns the selection:
NavigationLink
NavigationLink is a component that triggers navigation to a destination within a NavigationStack. It can navigate to another component or an external URL, and supports customizable transition animations.
NavigationStack
NavigationStack is a container that manages a stack of views for navigation. NavigationStack provides navigation functionality similar to iOS navigation controllers, allowing users to navigate forward and backward through a hierarchy of views.