StandardPage
StandardPage is the default page container used in NavigationStack. It provides a standard page layout and can optionally display a navigation bar with title and toolbar items.
StandardPage is the default page container used in NavigationStack. It provides a standard page layout and can optionally display a navigation bar with title and toolbar items.
Examples
Simple Page
Preview unavailable for this example in the static docs build.
Show code
<NavigationStack>
<StandardPage id="page-1">
<VStack spacing={20}>
<Text>Page Content</Text>
</VStack>
</StandardPage>
</NavigationStack>Page with Navigation Title
Preview unavailable for this example in the static docs build.
Show code
<NavigationStack>
<StandardPage id="page-1" navigationTitle="Home">
<VStack spacing={20}>
<Text>Page with Navigation Title</Text>
</VStack>
</StandardPage>
</NavigationStack>With Toolbar Items
Preview unavailable for this example in the static docs build.
Show code
<NavigationStack>
<StandardPage
id="page-1"
navigationTitle="Edit Profile"
toolbarItems={<Text>Save</Text>}
>
<VStack spacing={20}>
<Text>Page with Toolbar Items</Text>
</VStack>
</StandardPage>
</NavigationStack>Page Content Layout
Preview unavailable for this example in the static docs build.
Show code
<NavigationStack>
<StandardPage id="page-1" navigationTitle="Scrollable Page">
<ScrollView>
<VStack spacing={20}>
{Array.from({ length: 20 }, (_, i) => (
<Text key={i}>Item {i + 1}</Text>
))}
</VStack>
</ScrollView>
</StandardPage>
</NavigationStack>API
This component currently relies on inherited element props.
Overview
StandardPage is the default page container used in NavigationStack. It provides a standard page layout and can optionally display a navigation bar with title and toolbar items.
SwiftUI Correspondence: Similar to SwiftUI's view containers in NavigationStack.
Navigation Bar
Automatic Back Button
When a page is not the root page, the back button appears automatically:
// In NavigationStack
<NavigationStack>
{/* Root page - no back button */}
<StandardPage id="home" navigationTitle="Home">
<NavigationLink destination={DetailPage}>
<Button>Go to Detail</Button>
</NavigationLink>
</StandardPage>
</NavigationStack>
// Detail page - back button appears automatically
function DetailPage() {
return (
<StandardPage id="detail" navigationTitle="Details">
<Text>Detail content</Text>
</StandardPage>
)
}With Toolbar Items
Add action buttons to the navigation bar:
Multiple Toolbar Items
<StandardPage
id="article"
navigationTitle="Article"
toolbarItems={
<HStack spacing={8}>
<Button onClick={handleBookmark}>🔖</Button>
<Button onClick={handleShare}>Share</Button>
</HStack>
}
>
<ScrollView>...</ScrollView>
</StandardPage>Page Content Layout
StandardPage uses flexbox layout. Content automatically fills available space:
Props Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | ✅ | - | Unique identifier for the page |
navigationTitle | string | ❌ | - | Title to display in navigation bar. When provided, navigation bar is shown. |
toolbarItems | ReactNode | ❌ | - | Items to display on the right side of navigation bar |
style | CSSProperties | ❌ | - | Custom CSS styles |
className | string | ❌ | - | Custom CSS class name |
children | ReactNode | ❌ | - | Page content |
Common Patterns
List Page
<StandardPage id="products" navigationTitle="Products">
<List>
{products.map(product => (
<Section key={product.id}>
<ProductRow product={product} />
</Section>
))}
</List>
</StandardPage>Form Page
<StandardPage
id="edit"
navigationTitle="Edit"
toolbarItems={<Button onClick={handleSave}>Save</Button>}
>
<Form onSubmit={handleSubmit}>
<TextField label="Name" value={name} onChange={setName} />
<TextField label="Email" value={email} onChange={setEmail} />
</Form>
</StandardPage>Detail Page
<StandardPage id="detail" navigationTitle="Product Details">
<ScrollView>
<VStack spacing={20}>
<Image src={product.image} />
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>
{product.name}
</Text>
<Text>{product.description}</Text>
</VStack>
</ScrollView>
</StandardPage>Settings Page
<StandardPage id="settings" navigationTitle="Settings">
<List>
<Section header={<Text>Account</Text>}>
<NavigationLink destination={ProfilePage}>
<HStack>
<Text>Profile</Text>
<Spacer />
<Text>›</Text>
</HStack>
</NavigationLink>
</Section>
<Section header={<Text>Preferences</Text>}>
<Toggle label="Notifications" value={notifications} onChange={setNotifications} />
</Section>
</List>
</StandardPage>Integration with NavigationStack
StandardPage is designed to work within NavigationStack:
<NavigationStack>
<StandardPage id="home" navigationTitle="Home">
<VStack>
<NavigationLink
destination={DetailPage}
pageOptions={{ type: 'page' }}
>
<Button>Go to Detail</Button>
</NavigationLink>
</VStack>
</StandardPage>
</NavigationStack>Styling
Custom Page Styles
<StandardPage
id="custom"
navigationTitle="Custom"
style={{ backgroundColor: '#f5f5f5' }}
>
<VStack>...</VStack>
</StandardPage>Custom Navigation Bar Styles
Navigation bar styles can be customized via CSS variables:
:root {
--sw-color-background-primary: #FFFFFF;
--sw-color-separator: #C6C6C8;
}Best Practices
- Always provide an id: Each page needs a unique identifier
- Use navigationTitle consistently: Keep titles short and descriptive
- Place actions in toolbar: Use
toolbarItemsfor page-level actions - Use ScrollView for long content: Ensure content is scrollable when needed
- Keep pages focused: Each page should have a single, clear purpose
Related Components
- NavigationStack - Container for pages
- NavigationLink - Navigate between pages
- NavigationBar - The navigation bar component
- ScrollView - For scrollable content