Components
NavigationSplitView
NavigationSplitView presents sidebar, optional content, and detail columns with a compact fallback mode.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Default
Loading preview…
Code
'use client';
import { List } from '@swiftuijs/ui';
import { NavigationLink } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { NavigationSplitView } from '@swiftuijs/ui';
export default function Example() {
return ((<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
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:
More examples
Compact Column
Column Visibility
Column Visibility
API reference
| 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. Defaults to automatic adaptation to the container width. |
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.