0
# Multi-Page Applications
1

2
Dash supports single-page application (SPA) navigation with automatic routing, page registration, and SEO optimization. Multi-page apps enable building complex applications with multiple views and URL-based navigation.
3

4
## Capabilities
5

6
### Page Registration
7

8
Register pages for automatic routing and navigation.
9

10
```python { .api }
11
def register_page(
12
    module: str = None,
13
    path: str = None,
14
    path_template: str = None,
15
    name: str = None,
16
    order: Union[int, float] = None,
17
    title: str = None,
18
    description: str = None,
19
    image: str = None,
20
    redirect_from: List[str] = None,
21
    layout: Any = None,
22
    **kwargs
23
):
24
    """
25
    Register a page for multi-page navigation.
26
    
27
    Parameters:
28
    - module: Module name (auto-detected if called from page file)
29
    - path: URL path for the page (default: based on module name)
30
    - path_template: URL template with variables (e.g., '/user/<user_id>')
31
    - name: Display name for navigation
32
    - title: HTML page title
33
    - description: Meta description for SEO
34
    - image: Meta image for social sharing
35
    - redirect_from: List of paths that redirect to this page
36
    - layout: Page layout function or component
37
    """
38
```
39

40
### Page Registry
41

42
Access registered pages and their metadata.
43

44
```python { .api }
45
page_registry: Dict[str, PageConfig] = {
46
    'module_name': {
47
        'module': 'pages.home',
48
        'path': '/',
49
        'path_template': None,
50
        'name': 'Home',
51
        'title': 'Home Page',
52
        'description': 'Application home page',
53
        'order': 0,
54
        'layout': <layout_function>,
55
        'supplied_name': 'Home',
56
        'supplied_path': '/',
57
        'supplied_title': 'Home Page'
58
    }
59
}
60
```
61

62
### Page Container
63

64
Container component that renders the current page content.
65

66
```python { .api }
67
page_container: Component  # Container for current page content
68
```
69

70
## Usage Examples
71

72
### Basic Multi-Page App
73

74
**app.py:**
75
```python
76
from dash import Dash, html
77
import dash
78

79
app = Dash(__name__, use_pages=True)
80

81
app.layout = html.Div([
82
    html.Div([
83
        html.Div([
84
            html.A(f"{page['name']}", href=page["relative_path"])
85
            for page in dash.page_registry.values()
86
        ]),
87
    ]),
88
    
89
    dash.page_container
90
])
91

92
if __name__ == '__main__':
93
    app.run(debug=True)
94
```
95

96
**pages/home.py:**
97
```python
98
import dash
99
from dash import html
100

101
dash.register_page(__name__, path='/', name='Home')
102

103
layout = html.Div([
104
    html.H1('Home Page'),
105
    html.P('Welcome to our application!')
106
])
107
```
108

109
**pages/analytics.py:**
110
```python
111
import dash
112
from dash import html, dcc, callback, Input, Output
113

114
dash.register_page(
115
    __name__, 
116
    path='/analytics',
117
    name='Analytics',
118
    title='Analytics Dashboard',
119
    description='View application analytics and metrics'
120
)
121

122
layout = html.Div([
123
    html.H1('Analytics Dashboard'),
124
    dcc.Graph(id='analytics-chart')
125
])
126

127
@callback(
128
    Output('analytics-chart', 'figure'),
129
    Input('analytics-chart', 'id')
130
)
131
def update_chart(_):
132
    # Chart logic here
133
    return {'data': [], 'layout': {}}
134
```
135

136
### Path Templates and Variables
137

138
**pages/user_profile.py:**
139
```python
140
import dash
141
from dash import html, callback, Input, Output
142

143
dash.register_page(
144
    __name__,
145
    path_template='/user/<user_id>',
146
    name='User Profile'
147
)
148

149
def layout(user_id=None, **kwargs):
150
    return html.Div([
151
        html.H1(f'User Profile: {user_id}'),
152
        html.Div(id='user-content')
153
    ])
154

155
@callback(
156
    Output('user-content', 'children'),
157
    Input('url', 'pathname')  # Assuming dcc.Location with id='url'
158
)
159
def display_user(pathname):
160
    user_id = pathname.split('/')[-1]
161
    return f'Loading data for user {user_id}...'
162
```
163

164
### Custom Navigation
165

166
```python
167
from dash import html, dcc
168
import dash
169

170
def create_navbar():
171
    return html.Nav([
172
        html.Ul([
173
            html.Li([
174
                dcc.Link(
175
                    page['name'],
176
                    href=page['relative_path'],
177
                    className='nav-link'
178
                )
179
            ]) for page in dash.page_registry.values()
180
        ], className='nav-list')
181
    ], className='navbar')
182

183
app.layout = html.Div([
184
    create_navbar(),
185
    dash.page_container
186
])
187
```
188

189
### Page with SEO Metadata
190

191
```python
192
import dash
193
from dash import html
194

195
dash.register_page(
196
    __name__,
197
    path='/about',
198
    name='About Us',
199
    title='About Our Company - Best Data Solutions',
200
    description='Learn about our mission to provide the best data analytics solutions for businesses worldwide.',
201
    image='https://example.com/about-image.png'
202
)
203

204
layout = html.Div([
205
    html.H1('About Our Company'),
206
    html.P('We are a leading provider of data analytics solutions...'),
207
])
208
```
209

210
## Types
211

212
```python { .api }
213
PageConfig = Dict[str, Any]  # Page configuration dictionary
214
PageRegistry = Dict[str, PageConfig]  # Registry of all pages
215
LayoutFunction = Callable[..., Component]  # Page layout function
216
PageMetadata = Dict[str, Union[str, int, float, List[str]]]  # Page metadata
217
```