0
# Interactive Components
1
2
Dropdowns, collapsible content, tooltips, popovers, and other interactive elements for enhanced user interface functionality.
3
4
## Capabilities
5
6
### DropdownMenu
7
8
Dropdown menu component with toggleable content and menu items.
9
10
```python { .api }
11
class DropdownMenu:
12
"""
13
Dropdown menu component with button trigger and menu items.
14
15
Args:
16
children: Menu items (DropdownMenuItem components)
17
id (str): Component identifier for callbacks
18
style (dict): Inline CSS styles
19
class_name (str): Additional CSS classes
20
label (str): Button label text
21
direction (str): Menu direction - "down", "up", "left", "right"
22
size (str): Button size - "sm", "lg"
23
color (str): Button color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
24
caret (bool): Show dropdown caret
25
nav (bool): Style for use in navigation
26
in_navbar (bool): Style for use in navbar
27
toggle_style (dict): Styles for toggle button
28
toggle_class_name (str): CSS classes for toggle button
29
menu_style (dict): Styles for dropdown menu
30
menu_class_name (str): CSS classes for dropdown menu
31
disabled (bool): Disable dropdown
32
"""
33
def __init__(self, children=None, id=None, style=None, class_name=None,
34
label="Toggle Dropdown", direction="down", size=None, color="primary",
35
caret=True, nav=False, in_navbar=False, toggle_style=None, toggle_class_name=None,
36
menu_style=None, menu_class_name=None, disabled=False, **kwargs): ...
37
```
38
39
### DropdownMenuItem
40
41
Individual menu item component for use within DropdownMenu.
42
43
```python { .api }
44
class DropdownMenuItem:
45
"""
46
Individual item for dropdown menus.
47
48
Args:
49
children: Item content (text or components)
50
id (str): Component identifier for callbacks
51
style (dict): Inline CSS styles
52
class_name (str): Additional CSS classes
53
href (str): Link URL
54
external_link (bool): Open link in new tab
55
target (str): Link target
56
disabled (bool): Disable menu item
57
header (bool): Style as section header
58
divider (bool): Style as divider (ignore children)
59
active (bool): Active state styling
60
n_clicks (int): Number of clicks (for callbacks)
61
"""
62
def __init__(self, children=None, id=None, style=None, class_name=None,
63
href=None, external_link=False, target=None, disabled=False,
64
header=False, divider=False, active=False, n_clicks=0, **kwargs): ...
65
```
66
67
### Collapse
68
69
Collapsible content component with show/hide functionality.
70
71
```python { .api }
72
class Collapse:
73
"""
74
Collapsible content component.
75
76
Args:
77
children: Collapsible content
78
id (str): Component identifier for callbacks
79
is_open (bool): Control collapse visibility
80
style (dict): Inline CSS styles
81
class_name (str): Additional CSS classes
82
navbar (bool): Style for navbar collapse
83
dimension (str): Collapse dimension - "height" (default) or "width"
84
"""
85
def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
86
navbar=False, dimension="height", **kwargs): ...
87
```
88
89
### Fade
90
91
Fade transition component for showing/hiding content with animation.
92
93
```python { .api }
94
class Fade:
95
"""
96
Fade transition component for smooth show/hide animations.
97
98
Args:
99
children: Content to fade in/out
100
id (str): Component identifier for callbacks
101
is_in (bool): Control fade visibility
102
style (dict): Inline CSS styles
103
class_name (str): Additional CSS classes
104
appear (bool): Apply transition on initial mount
105
enter (bool): Enable enter transitions
106
exit (bool): Enable exit transitions
107
timeout (dict|int): Transition timeout (int or dict with enter/exit keys)
108
"""
109
def __init__(self, children=None, id=None, is_in=True, style=None, class_name=None,
110
appear=False, enter=True, exit=True, timeout=None, **kwargs): ...
111
```
112
113
### Offcanvas
114
115
Sidebar panel component that slides in from screen edges.
116
117
```python { .api }
118
class Offcanvas:
119
"""
120
Offcanvas component for sidebar panels and navigation.
121
122
Args:
123
children: Offcanvas content
124
id (str): Component identifier for callbacks
125
is_open (bool): Control offcanvas visibility
126
style (dict): Inline CSS styles
127
class_name (str): Additional CSS classes
128
placement (str): Panel placement - "start", "end", "top", "bottom"
129
backdrop (bool): Show backdrop overlay
130
scrollable (bool): Allow body scrolling when open
131
keyboard (bool): Close with Escape key
132
title (str): Offcanvas title
133
close_button (bool): Show close button
134
"""
135
def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
136
placement="start", backdrop=True, scrollable=False, keyboard=True,
137
title=None, close_button=True, **kwargs): ...
138
```
139
140
### Tooltip
141
142
Tooltip overlay component for contextual information on hover.
143
144
```python { .api }
145
class Tooltip:
146
"""
147
Tooltip component for contextual information on hover.
148
149
Args:
150
children: Tooltip content
151
id (str): Component identifier
152
target (str): ID of target element to attach tooltip
153
placement (str): Tooltip placement - "top", "bottom", "left", "right", "auto"
154
style (dict): Inline CSS styles
155
class_name (str): Additional CSS classes
156
delay (dict|int): Show/hide delay (int or dict with show/hide keys)
157
trigger (str): Trigger event - "hover", "focus", "click"
158
offset (list): Tooltip offset [x, y]
159
autohide (bool): Auto-hide tooltip
160
fade (bool): Enable fade animation
161
"""
162
def __init__(self, children=None, id=None, target=None, placement="top",
163
style=None, class_name=None, delay=None, trigger="hover",
164
offset=None, autohide=True, fade=True, **kwargs): ...
165
```
166
167
### Popover
168
169
Popover overlay component for rich contextual content.
170
171
```python { .api }
172
class Popover:
173
"""
174
Popover component for rich contextual overlays.
175
176
Args:
177
children: Popover content
178
id (str): Component identifier for callbacks
179
target (str): ID of target element to attach popover
180
placement (str): Popover placement - "top", "bottom", "left", "right", "auto"
181
is_open (bool): Control popover visibility
182
style (dict): Inline CSS styles
183
class_name (str): Additional CSS classes
184
trigger (str): Trigger event - "click", "hover", "focus"
185
delay (dict|int): Show/hide delay
186
offset (list): Popover offset [x, y]
187
fade (bool): Enable fade animation
188
title (str): Popover title
189
"""
190
def __init__(self, children=None, id=None, target=None, placement="top", is_open=False,
191
style=None, class_name=None, trigger="click", delay=None, offset=None,
192
fade=True, title=None, **kwargs): ...
193
```
194
195
### PopoverHeader
196
197
Header component for popovers with title styling.
198
199
```python { .api }
200
class PopoverHeader:
201
"""
202
Header component for popovers.
203
204
Args:
205
children: Header content
206
id (str): Component identifier
207
style (dict): Inline CSS styles
208
class_name (str): Additional CSS classes
209
"""
210
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
211
```
212
213
### PopoverBody
214
215
Body component for popover content with appropriate padding.
216
217
```python { .api }
218
class PopoverBody:
219
"""
220
Body component for popover content.
221
222
Args:
223
children: Body content
224
id (str): Component identifier
225
style (dict): Inline CSS styles
226
class_name (str): Additional CSS classes
227
"""
228
def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
229
```
230
231
## Usage Examples
232
233
### Basic Dropdown Menu
234
235
```python
236
import dash_bootstrap_components as dbc
237
from dash import html, callback, Input, Output
238
239
# Basic dropdown menu
240
dropdown = dbc.DropdownMenu(
241
children=[
242
dbc.DropdownMenuItem("Action", id="action-item"),
243
dbc.DropdownMenuItem("Another action", id="another-action"),
244
dbc.DropdownMenuItem(divider=True),
245
dbc.DropdownMenuItem("Separated link", id="separated-link"),
246
],
247
label="Dropdown",
248
color="primary",
249
)
250
251
# Output for dropdown selections
252
dropdown_output = html.Div(id="dropdown-output")
253
254
@callback(
255
Output("dropdown-output", "children"),
256
[Input("action-item", "n_clicks"), Input("another-action", "n_clicks"), Input("separated-link", "n_clicks")],
257
prevent_initial_call=True
258
)
259
def handle_dropdown_click(action_clicks, another_clicks, separated_clicks):
260
ctx = callback_context
261
if ctx.triggered:
262
button_id = ctx.triggered[0]['prop_id'].split('.')[0]
263
return f"You clicked: {button_id}"
264
return "No selection"
265
```
266
267
### Collapsible Content
268
269
```python
270
from dash import callback, Input, Output, State
271
272
# Collapsible content with toggle button
273
collapse_example = html.Div([
274
dbc.Button("Toggle Collapse", id="collapse-button", color="primary", className="mb-3"),
275
dbc.Collapse([
276
dbc.Card([
277
dbc.CardBody([
278
html.H4("Collapsible Content"),
279
html.P("This content can be collapsed and expanded."),
280
html.P("It's useful for showing/hiding detailed information."),
281
])
282
])
283
], id="collapse-content", is_open=False),
284
])
285
286
@callback(
287
Output("collapse-content", "is_open"),
288
[Input("collapse-button", "n_clicks")],
289
[State("collapse-content", "is_open")],
290
)
291
def toggle_collapse(n_clicks, is_open):
292
if n_clicks:
293
return not is_open
294
return is_open
295
```
296
297
### Tooltips
298
299
```python
300
# Tooltips with different placements
301
tooltips_example = html.Div([
302
html.Div([
303
dbc.Button("Top", id="tooltip-top", color="primary", className="me-2"),
304
dbc.Tooltip("Tooltip on top", target="tooltip-top", placement="top"),
305
306
dbc.Button("Bottom", id="tooltip-bottom", color="primary", className="me-2"),
307
dbc.Tooltip("Tooltip on bottom", target="tooltip-bottom", placement="bottom"),
308
309
dbc.Button("Left", id="tooltip-left", color="primary", className="me-2"),
310
dbc.Tooltip("Tooltip on left", target="tooltip-left", placement="left"),
311
312
dbc.Button("Right", id="tooltip-right", color="primary"),
313
dbc.Tooltip("Tooltip on right", target="tooltip-right", placement="right"),
314
], className="mb-4"),
315
316
# Complex tooltip content
317
html.Div([
318
dbc.Badge("Hover me", id="complex-tooltip-target", color="info", className="p-2"),
319
dbc.Tooltip([
320
html.Strong("Complex Tooltip"),
321
html.Br(),
322
"This tooltip contains HTML content with ",
323
html.Em("formatting"),
324
" and multiple lines.",
325
], target="complex-tooltip-target"),
326
]),
327
])
328
```
329
330
### Popovers
331
332
```python
333
from dash import callback, Input, Output, State
334
335
# Popover with rich content
336
popover_example = html.Div([
337
dbc.Button("Click for Popover", id="popover-button", color="success"),
338
dbc.Popover([
339
dbc.PopoverHeader("Popover Title"),
340
dbc.PopoverBody([
341
html.P("This popover contains rich content:"),
342
html.Ul([
343
html.Li("List item 1"),
344
html.Li("List item 2"),
345
html.Li("List item 3"),
346
]),
347
dbc.Button("Action", size="sm", color="primary"),
348
]),
349
], target="popover-button", placement="right", is_open=False, id="popover"),
350
])
351
352
@callback(
353
Output("popover", "is_open"),
354
[Input("popover-button", "n_clicks")],
355
[State("popover", "is_open")],
356
)
357
def toggle_popover(n_clicks, is_open):
358
if n_clicks:
359
return not is_open
360
return is_open
361
```
362
363
### Offcanvas Sidebar
364
365
```python
366
from dash import callback, Input, Output, State
367
368
# Offcanvas sidebar navigation
369
offcanvas_example = html.Div([
370
dbc.Button("Open Sidebar", id="offcanvas-button", color="dark"),
371
dbc.Offcanvas([
372
html.H4("Navigation Menu"),
373
html.Hr(),
374
dbc.Nav([
375
dbc.NavItem(dbc.NavLink("Home", href="/")),
376
dbc.NavItem(dbc.NavLink("About", href="/about")),
377
dbc.NavItem(dbc.NavLink("Services", href="/services")),
378
dbc.NavItem(dbc.NavLink("Contact", href="/contact")),
379
], vertical=True, pills=True),
380
html.Hr(),
381
html.P("Additional sidebar content can go here."),
382
], id="offcanvas", title="Menu", is_open=False),
383
])
384
385
@callback(
386
Output("offcanvas", "is_open"),
387
[Input("offcanvas-button", "n_clicks")],
388
[State("offcanvas", "is_open")],
389
)
390
def toggle_offcanvas(n_clicks, is_open):
391
if n_clicks:
392
return not is_open
393
return is_open
394
```
395
396
### Fade Transition
397
398
```python
399
from dash import callback, Input, Output, State
400
401
# Content with fade transition
402
fade_example = html.Div([
403
dbc.Button("Toggle Fade", id="fade-button", color="info", className="mb-3"),
404
dbc.Fade([
405
dbc.Alert([
406
html.H4("Fade Alert", className="alert-heading"),
407
html.P("This alert fades in and out smoothly."),
408
html.P("Fade transitions provide smooth visual feedback.", className="mb-0"),
409
], color="info"),
410
], id="fade-content", is_in=True),
411
])
412
413
@callback(
414
Output("fade-content", "is_in"),
415
[Input("fade-button", "n_clicks")],
416
[State("fade-content", "is_in")],
417
)
418
def toggle_fade(n_clicks, is_in):
419
if n_clicks:
420
return not is_in
421
return is_in
422
```
423
424
### Advanced Dropdown with Headers and Dividers
425
426
```python
427
# Dropdown with organized sections
428
advanced_dropdown = dbc.DropdownMenu([
429
dbc.DropdownMenuItem("Settings", header=True),
430
dbc.DropdownMenuItem("Profile", id="profile-item"),
431
dbc.DropdownMenuItem("Preferences", id="preferences-item"),
432
dbc.DropdownMenuItem("Account", id="account-item"),
433
dbc.DropdownMenuItem(divider=True),
434
dbc.DropdownMenuItem("Actions", header=True),
435
dbc.DropdownMenuItem("Export Data", id="export-item"),
436
dbc.DropdownMenuItem("Import Data", id="import-item"),
437
dbc.DropdownMenuItem(divider=True),
438
dbc.DropdownMenuItem("Sign Out", id="signout-item", className="text-danger"),
439
], label="User Menu", color="secondary", direction="down")
440
```
441
442
### Multi-level Interactive Component
443
444
```python
445
# Complex interactive component combining multiple elements
446
interactive_dashboard = dbc.Card([
447
dbc.CardHeader([
448
html.Div([
449
html.H5("Interactive Dashboard", className="mb-0"),
450
dbc.DropdownMenu([
451
dbc.DropdownMenuItem("Refresh", id="refresh-dashboard"),
452
dbc.DropdownMenuItem("Export", id="export-dashboard"),
453
dbc.DropdownMenuItem(divider=True),
454
dbc.DropdownMenuItem("Settings", id="dashboard-settings"),
455
], label="Options", size="sm", color="outline-secondary"),
456
], className="d-flex justify-content-between align-items-center"),
457
]),
458
dbc.CardBody([
459
dbc.Row([
460
dbc.Col([
461
dbc.Button("Show Details", id="details-toggle", color="primary", size="sm"),
462
html.Span(" Hover for info", id="info-target", className="ms-2 text-muted"),
463
dbc.Tooltip("This shows additional details", target="info-target"),
464
], width=6),
465
dbc.Col([
466
dbc.Button("Open Panel", id="panel-toggle", color="success", size="sm"),
467
], width=6),
468
], className="mb-3"),
469
dbc.Collapse([
470
dbc.Alert("Detailed information is now visible!", color="info"),
471
], id="details-collapse", is_open=False),
472
dbc.Fade([
473
dbc.Card([
474
dbc.CardBody("Additional panel content appears here."),
475
], color="light"),
476
], id="panel-fade", is_in=False),
477
]),
478
])
479
480
@callback(
481
Output("details-collapse", "is_open"),
482
[Input("details-toggle", "n_clicks")],
483
[State("details-collapse", "is_open")],
484
)
485
def toggle_details(n_clicks, is_open):
486
if n_clicks:
487
return not is_open
488
return is_open
489
490
@callback(
491
Output("panel-fade", "is_in"),
492
[Input("panel-toggle", "n_clicks")],
493
[State("panel-fade", "is_in")],
494
)
495
def toggle_panel(n_clicks, is_in):
496
if n_clicks:
497
return not is_in
498
return is_in
499
```