SettingsLayout
Two-column settings page layout with a fixed-width menu and fluid content area.
Category: layout · WCAG 2.1-AA · layout, settings, page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
menu | ReactNode | — | Side navigation menu |
children | ReactNode | — | Settings content area |
Design tokens
--cascivo-space-8
When to use
- A two-column settings page with a fixed-width menu and fluid content
- Account, preferences, or admin pages with sectioned navigation
When not to use
- A general resizable two-pane layout — use SplitView
- A full app frame — use AppShell or SidebarApp
Examples
Basic
Menu + content layout
<SettingsLayout menu={<nav>Menu</nav>}><div>Settings</div></SettingsLayout>Related components
- SettingsFormPage — The settings form block composes this layout
- SplitView — Use when the two panes should be user-resizable