0
# Navigation Components
1
2
Navigation bars, breadcrumbs, tabs, and other navigation elements for creating intuitive user interfaces and application structure.
3
4
## Capabilities
5
6
### Navbar
7
8
Primary navigation bar component with branding, links, and responsive behavior.
9
10
```python { .api }
11
class Navbar:
12
"""
13
Navigation bar component with Bootstrap styling and responsive behavior.
14
15
Args:
16
children: Navigation items (NavItem, NavLink, etc.)
17
id (str): Component identifier for callbacks
18
style (dict): Inline CSS styles
19
class_name (str): Additional CSS classes
20
brand (str|component): Brand text or component
21
brand_href (str): URL for brand link
22
brand_style (dict): Styles for brand element
23
brand_external_link (bool): Open brand link in new tab
24
color (str): Navbar color theme - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
25
dark (bool): Use dark theme (overrides color for text contrast)
26
light (bool): Use light theme
27
fixed (str): Fixed positioning - "top" or "bottom"
28
sticky (str): Sticky positioning - "top"
29
expand (str|bool): Responsive breakpoint for collapsing - "sm", "md", "lg", "xl", True (never collapse), False (always collapse)
30
"""
31
def __init__(self, children=None, id=None, style=None, class_name=None,
32
brand=None, brand_href=None, brand_style=None, brand_external_link=False,
33
color=None, dark=None, light=None, fixed=None, sticky=None, expand="lg", **kwargs): ...
34
```
35
36
### NavbarBrand
37
38
Brand component for navbar with text or logo content.
39
40
```python { .api }
41
class NavbarBrand:
42
"""
43
Navbar brand component for logo or site name.
44
45
Args:
46
children: Brand content (text, image, or components)
47
id (str): Component identifier
48
href (str): Brand link URL
49
external_link (bool): Open link in new tab
50
style (dict): Inline CSS styles
51
class_name (str): Additional CSS classes
52
"""
53
def __init__(self, children=None, id=None, href=None, external_link=False,
54
style=None, class_name=None, **kwargs): ...
55
```
56
57
### NavbarToggler
58
59
Mobile menu toggle button for responsive navbar collapse.
60
61
```python { .api }
62
class NavbarToggler:
63
"""
64
Toggle button for collapsible navbar content on mobile.
65
66
Args:
67
id (str): Component identifier for callbacks (to control Collapse component)
68
style (dict): Inline CSS styles
69
class_name (str): Additional CSS classes
70
"""
71
def __init__(self, id=None, style=None, class_name=None, **kwargs): ...
72
```
73
74
### Nav
75
76
Navigation component for organizing navigation links and items.
77
78
```python { .api }
79
class Nav:
80
"""
81
Navigation container for organizing navigation links.
82
83
Args:
84
children: Navigation items (NavItem, NavLink, etc.)
85
id (str): Component identifier
86
style (dict): Inline CSS styles
87
class_name (str): Additional CSS classes
88
vertical (bool): Stack navigation items vertically
89
pills (bool): Use pill-style navigation
90
fill (bool): Fill available width proportionally
91
justified (bool): Fill available width equally
92
navbar (bool): Style for use in navbar
93
"""
94
def __init__(self, children=None, id=None, style=None, class_name=None,
95
vertical=False, pills=False, fill=False, justified=False, navbar=False, **kwargs): ...
96
```
97
98
### NavItem
99
100
Individual navigation item container.
101
102
```python { .api }
103
class NavItem:
104
"""
105
Individual navigation item container.
106
107
Args:
108
children: Content (typically NavLink)
109
id (str): Component identifier
110
style (dict): Inline CSS styles
111
class_name (str): Additional CSS classes
112
"""
113
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
114
```
115
116
### NavLink
117
118
Navigation link component with active state and styling.
119
120
```python { .api }
121
class NavLink:
122
"""
123
Navigation link with active state support.
124
125
Args:
126
children: Link text or content
127
id (str): Component identifier for callbacks
128
href (str): Link URL
129
active (bool): Active state styling
130
disabled (bool): Disabled state styling
131
external_link (bool): Open link in new tab
132
style (dict): Inline CSS styles
133
class_name (str): Additional CSS classes
134
"""
135
def __init__(self, children=None, id=None, href=None, active=False, disabled=False,
136
external_link=False, style=None, class_name=None, **kwargs): ...
137
```
138
139
### NavbarSimple
140
141
Simplified navbar component with common configuration options.
142
143
```python { .api }
144
class NavbarSimple:
145
"""
146
Simplified navbar with common patterns pre-configured.
147
148
Args:
149
children: Additional navbar content
150
brand (str|component): Brand text or component
151
brand_href (str): Brand link URL
152
links (list): List of link dictionaries with "label" and "href" keys
153
links_left (list): Links positioned on the left side
154
fluid (bool): Use fluid container
155
color (str): Navbar color theme
156
dark (bool): Use dark theme
157
light (bool): Use light theme
158
fixed (str): Fixed positioning
159
sticky (str): Sticky positioning
160
expand (str|bool): Responsive breakpoint
161
"""
162
def __init__(self, children=None, brand=None, brand_href=None, links=None, links_left=None,
163
fluid=False, color=None, dark=None, light=None, fixed=None, sticky=None,
164
expand="lg", style=None, class_name=None, **kwargs): ...
165
```
166
167
### Breadcrumb
168
169
Breadcrumb navigation component for showing page hierarchy.
170
171
```python { .api }
172
class Breadcrumb:
173
"""
174
Breadcrumb navigation for page hierarchy.
175
176
Args:
177
items (list): List of breadcrumb dictionaries with "label", "href", "active" keys
178
id (str): Component identifier
179
style (dict): Inline CSS styles
180
class_name (str): Additional CSS classes
181
"""
182
def __init__(self, items=None, id=None, style=None, class_name=None, **kwargs): ...
183
```
184
185
### Tabs
186
187
Tab navigation component for organizing content into switchable panels.
188
189
```python { .api }
190
class Tabs:
191
"""
192
Tab navigation for organizing content panels.
193
194
Args:
195
children: Tab components
196
id (str): Component identifier for callbacks
197
active_tab (str): ID of currently active tab
198
style (dict): Inline CSS styles
199
class_name (str): Additional CSS classes
200
"""
201
def __init__(self, children=None, id=None, active_tab=None, style=None, class_name=None, **kwargs): ...
202
```
203
204
### Tab
205
206
Individual tab component for use within Tabs.
207
208
```python { .api }
209
class Tab:
210
"""
211
Individual tab for use within Tabs component.
212
213
Args:
214
children: Tab content/panel
215
label (str): Tab label text
216
tab_id (str): Unique identifier for this tab
217
disabled (bool): Disable this tab
218
label_style (dict): Styles for tab label
219
label_class_name (str): CSS classes for tab label
220
active_label_style (dict): Styles for active tab label
221
active_label_class_name (str): CSS classes for active tab label
222
style (dict): Inline CSS styles for tab content
223
class_name (str): Additional CSS classes for tab content
224
"""
225
def __init__(self, children=None, label=None, tab_id=None, disabled=False,
226
label_style=None, label_class_name=None, active_label_style=None,
227
active_label_class_name=None, style=None, class_name=None, **kwargs): ...
228
```
229
230
### Pagination
231
232
Pagination component for navigating through multiple pages of content.
233
234
```python { .api }
235
class Pagination:
236
"""
237
Pagination component for page navigation.
238
239
Args:
240
id (str): Component identifier for callbacks
241
active_page (int): Currently active page number
242
max_value (int): Maximum page number
243
first_last (bool): Show first/last page buttons
244
previous_next (bool): Show previous/next buttons
245
fully_expanded (bool): Show all page numbers
246
size (str): Size - "sm", "lg"
247
style (dict): Inline CSS styles
248
class_name (str): Additional CSS classes
249
"""
250
def __init__(self, id=None, active_page=1, max_value=1, first_last=False,
251
previous_next=False, fully_expanded=False, size=None,
252
style=None, class_name=None, **kwargs): ...
253
```
254
255
## Usage Examples
256
257
### Basic Navbar
258
259
```python
260
import dash_bootstrap_components as dbc
261
from dash import html
262
263
navbar = dbc.Navbar([
264
dbc.Container([
265
dbc.NavbarBrand("My App", href="/"),
266
dbc.Nav([
267
dbc.NavItem(dbc.NavLink("Home", href="/")),
268
dbc.NavItem(dbc.NavLink("About", href="/about")),
269
dbc.NavItem(dbc.NavLink("Contact", href="/contact")),
270
], navbar=True),
271
])
272
], color="primary", dark=True)
273
```
274
275
### Responsive Navbar with Toggle
276
277
```python
278
from dash import callback, Input, Output, State
279
280
navbar = dbc.Navbar([
281
dbc.Container([
282
dbc.Row([
283
dbc.Col(dbc.NavbarBrand("Brand", href="/")),
284
dbc.Col(dbc.NavbarToggler(id="navbar-toggler")),
285
], align="center", no_gutters=True),
286
dbc.Collapse([
287
dbc.Nav([
288
dbc.NavItem(dbc.NavLink("Home", href="/")),
289
dbc.NavItem(dbc.NavLink("Products", href="/products")),
290
dbc.NavItem(dbc.NavLink("Services", href="/services")),
291
], navbar=True),
292
], id="navbar-collapse", navbar=True),
293
])
294
], color="dark", dark=True)
295
296
@callback(
297
Output("navbar-collapse", "is_open"),
298
[Input("navbar-toggler", "n_clicks")],
299
[State("navbar-collapse", "is_open")],
300
)
301
def toggle_navbar_collapse(n, is_open):
302
if n:
303
return not is_open
304
return is_open
305
```
306
307
### Simple Navbar
308
309
```python
310
# Pre-configured simple navbar
311
simple_navbar = dbc.NavbarSimple(
312
brand="Company Name",
313
brand_href="/",
314
links=[
315
{"label": "Home", "href": "/"},
316
{"label": "About", "href": "/about"},
317
{"label": "Contact", "href": "/contact"},
318
],
319
color="primary",
320
dark=True,
321
)
322
```
323
324
### Breadcrumb Navigation
325
326
```python
327
breadcrumb = dbc.Breadcrumb(
328
items=[
329
{"label": "Home", "href": "/"},
330
{"label": "Products", "href": "/products"},
331
{"label": "Electronics", "href": "/products/electronics"},
332
{"label": "Smartphones", "active": True},
333
]
334
)
335
```
336
337
### Tab Navigation
338
339
```python
340
from dash import callback, Input, Output
341
342
tabs = dbc.Tabs([
343
dbc.Tab(label="Tab 1", tab_id="tab-1"),
344
dbc.Tab(label="Tab 2", tab_id="tab-2"),
345
dbc.Tab(label="Tab 3", tab_id="tab-3", disabled=True),
346
], id="tabs", active_tab="tab-1")
347
348
tab_content = html.Div(id="tab-content")
349
350
@callback(
351
Output("tab-content", "children"),
352
[Input("tabs", "active_tab")]
353
)
354
def render_tab_content(active_tab):
355
if active_tab == "tab-1":
356
return html.P("Content for Tab 1")
357
elif active_tab == "tab-2":
358
return html.P("Content for Tab 2")
359
return html.P("No content available")
360
```
361
362
### Pagination
363
364
```python
365
from dash import callback, Input, Output
366
367
pagination = dbc.Pagination(
368
id="pagination",
369
active_page=1,
370
max_value=10,
371
first_last=True,
372
previous_next=True,
373
fully_expanded=False,
374
)
375
376
content = html.Div(id="page-content")
377
378
@callback(
379
Output("page-content", "children"),
380
[Input("pagination", "active_page")]
381
)
382
def update_page_content(page):
383
return html.P(f"Content for page {page}")
384
```
385
386
### Vertical Navigation
387
388
```python
389
# Sidebar-style vertical navigation
390
sidebar_nav = dbc.Nav([
391
dbc.NavItem(dbc.NavLink("Dashboard", href="/dashboard", active=True)),
392
dbc.NavItem(dbc.NavLink("Users", href="/users")),
393
dbc.NavItem(dbc.NavLink("Settings", href="/settings")),
394
dbc.NavItem(dbc.NavLink("Reports", href="/reports")),
395
], vertical=True, pills=True)
396
```
397
398
### Fixed/Sticky Navbar
399
400
```python
401
# Fixed to top
402
fixed_navbar = dbc.Navbar([
403
dbc.NavbarBrand("Fixed Top"),
404
dbc.Nav([
405
dbc.NavItem(dbc.NavLink("Link", href="#")),
406
], navbar=True),
407
], color="primary", dark=True, fixed="top")
408
409
# Sticky to top
410
sticky_navbar = dbc.Navbar([
411
dbc.NavbarBrand("Sticky Top"),
412
dbc.Nav([
413
dbc.NavItem(dbc.NavLink("Link", href="#")),
414
], navbar=True),
415
], color="secondary", dark=True, sticky="top")
416
```