0
# Navigation Components
1

2
Navigation elements including menus, tabs, breadcrumbs, tooltips, and popovers for creating intuitive user navigation experiences.
3

4
## Capabilities
5

6
### Menu System
7

8
Dropdown menus for organizing navigation and actions.
9

10
```python { .api }
11
def Menu(
12
    children=None,  # Menu content
13
    opened=False,  # Menu open state
14
    trigger="click",  # "click" | "hover"
15
    position="bottom",  # Menu position relative to trigger
16
    offset=5,  # Distance from trigger
17
    closeOnItemClick=True,  # Close menu when item clicked
18
    **kwargs
19
): 
20
    """
21
    Dropdown menu container.
22
    
23
    Parameters:
24
    - children: MenuTarget and MenuDropdown components
25
    - opened: Control menu open state
26
    - trigger: How menu opens
27
    - position: Menu position relative to trigger
28
    - offset: Distance from trigger in pixels
29
    - closeOnItemClick: Auto-close on item selection
30
    """
31

32
def MenuTarget(
33
    children=None,  # Trigger element
34
    **kwargs
35
): 
36
    """
37
    Menu trigger element.
38
    
39
    Parameters:
40
    - children: Element that triggers menu (Button, etc.)
41
    """
42

43
def MenuDropdown(
44
    children=None,  # Menu items
45
    **kwargs
46
): 
47
    """
48
    Menu dropdown content container.
49
    
50
    Parameters:
51
    - children: MenuItem, MenuLabel, MenuDivider components
52
    """
53

54
def MenuItem(
55
    children=None,  # Item content
56
    icon=None,  # Item icon
57
    rightSection=None,  # Right-side content
58
    disabled=False,  # Disabled state
59
    color="blue",  # Item color when focused
60
    **kwargs
61
): 
62
    """
63
    Individual menu item.
64
    
65
    Parameters:
66
    - children: Item text/content
67
    - icon: Left-side icon
68
    - rightSection: Right-side content (shortcut, etc.)
69
    - disabled: Disable item interaction
70
    - color: Highlight color
71
    """
72

73
def MenuLabel(
74
    children=None,  # Label text
75
    **kwargs
76
): 
77
    """
78
    Menu section label.
79
    
80
    Parameters:
81
    - children: Label text content
82
    """
83

84
def MenuDivider(**kwargs): 
85
    """
86
    Menu separator line.
87
    """
88
```
89

90
### Tab System
91

92
Tabbed navigation for organizing content into sections.
93

94
```python { .api }
95
def Tabs(
96
    children=None,  # Tab content
97
    value=None,  # Active tab value
98
    defaultValue=None,  # Default active tab
99
    orientation="horizontal",  # "horizontal" | "vertical"
100
    placement="top",  # "top" | "bottom" | "left" | "right"
101
    color="blue",  # Active tab color
102
    variant="default",  # "default" | "outline" | "pills"
103
    radius="sm",  # Border radius
104
    **kwargs
105
): 
106
    """
107
    Tab container component.
108
    
109
    Parameters:
110
    - children: TabsList and TabsPanel components
111
    - value: Currently active tab value
112
    - defaultValue: Initially active tab
113
    - orientation: Tab layout direction
114
    - placement: Tab list position
115
    - color: Active tab color
116
    - variant: Tab style variant
117
    - radius: Border radius
118
    """
119

120
def TabsList(
121
    children=None,  # Tab buttons
122
    position="left",  # "left" | "center" | "right"
123
    grow=False,  # Tabs fill available width
124
    **kwargs
125
): 
126
    """
127
    Container for tab navigation buttons.
128
    
129
    Parameters:
130
    - children: TabsTab components
131
    - position: Tab alignment
132
    - grow: Whether tabs expand to fill width
133
    """
134

135
def TabsTab(
136
    children=None,  # Tab label
137
    value=None,  # Tab identifier value
138
    disabled=False,  # Disabled state
139
    icon=None,  # Tab icon
140
    rightSection=None,  # Right-side content
141
    **kwargs
142
): 
143
    """
144
    Individual tab navigation button.
145
    
146
    Parameters:
147
    - children: Tab label text
148
    - value: Unique tab identifier
149
    - disabled: Disable tab interaction
150
    - icon: Left-side icon
151
    - rightSection: Right-side content
152
    """
153

154
def TabsPanel(
155
    children=None,  # Panel content
156
    value=None,  # Associated tab value
157
    **kwargs
158
): 
159
    """
160
    Tab content panel.
161
    
162
    Parameters:
163
    - children: Content to show when tab is active
164
    - value: Tab identifier this panel belongs to
165
    """
166
```
167

168
### Popover System
169

170
Floating content that appears on interaction.
171

172
```python { .api }
173
def Popover(
174
    children=None,  # Popover content
175
    opened=False,  # Popover open state
176
    position="bottom",  # Position relative to target
177
    offset=5,  # Distance from target
178
    width="target",  # Popover width
179
    shadow="md",  # Popover shadow
180
    radius="sm",  # Border radius
181
    withArrow=False,  # Show arrow pointer
182
    arrowSize=7,  # Arrow size
183
    **kwargs
184
): 
185
    """
186
    Popover container component.
187
    
188
    Parameters:
189
    - children: PopoverTarget and PopoverDropdown
190
    - opened: Control popover visibility
191
    - position: Position relative to target
192
    - offset: Distance from target
193
    - width: Popover width ("target" or number)
194
    - shadow: Popover shadow intensity
195
    - withArrow: Show arrow pointing to target
196
    - arrowSize: Arrow size in pixels
197
    """
198

199
def PopoverTarget(
200
    children=None,  # Target element
201
    **kwargs
202
): 
203
    """
204
    Popover trigger element.
205
    
206
    Parameters:
207
    - children: Element that triggers popover
208
    """
209

210
def PopoverDropdown(
211
    children=None,  # Popover content
212
    **kwargs
213
): 
214
    """
215
    Popover content container.
216
    
217
    Parameters:
218
    - children: Content to display in popover
219
    """
220
```
221

222
### Tooltip System
223

224
Informational tooltips for providing context and help.
225

226
```python { .api }
227
def Tooltip(
228
    children=None,  # Target element
229
    label="",  # Tooltip text
230
    position="top",  # Tooltip position
231
    offset=5,  # Distance from target
232
    color="dark",  # Tooltip background color
233
    radius="sm",  # Border radius
234
    multiline=False,  # Allow multiline text
235
    width="auto",  # Tooltip width
236
    withArrow=False,  # Show arrow
237
    arrowSize=4,  # Arrow size
238
    opened=None,  # Control tooltip visibility
239
    **kwargs
240
): 
241
    """
242
    Tooltip component for contextual information.
243
    
244
    Parameters:
245
    - children: Element to attach tooltip to
246
    - label: Tooltip text content
247
    - position: Position relative to target
248
    - offset: Distance from target
249
    - color: Tooltip background color
250
    - radius: Border radius
251
    - multiline: Allow text wrapping
252
    - width: Tooltip width constraint
253
    - withArrow: Show arrow pointer
254
    - opened: Manual control of visibility
255
    """
256

257
def FloatingTooltip(
258
    children=None,  # Target element
259
    label="",  # Tooltip text
260
    disabled=False,  # Disable tooltip
261
    **kwargs
262
): 
263
    """
264
    Advanced floating tooltip with better positioning.
265
    
266
    Parameters:
267
    - children: Element to attach tooltip to
268
    - label: Tooltip text content
269
    - disabled: Disable tooltip display
270
    """
271
```
272

273
### HoverCard System
274

275
Rich content cards that appear on hover.
276

277
```python { .api }
278
def HoverCard(
279
    children=None,  # HoverCard content
280
    width=300,  # Card width
281
    shadow="md",  # Card shadow
282
    radius="sm",  # Border radius
283
    openDelay=0,  # Delay before opening
284
    closeDelay=150,  # Delay before closing
285
    position="bottom",  # Position relative to target
286
    withArrow=False,  # Show arrow pointer
287
    **kwargs
288
): 
289
    """
290
    Rich hover card component.
291
    
292
    Parameters:
293
    - children: HoverCardTarget and HoverCardDropdown
294
    - width: Card width in pixels
295
    - shadow: Card shadow intensity
296
    - radius: Border radius
297
    - openDelay: Delay before showing (ms)
298
    - closeDelay: Delay before hiding (ms)
299
    - position: Card position relative to target
300
    - withArrow: Show arrow pointer
301
    """
302

303
def HoverCardTarget(
304
    children=None,  # Target element
305
    **kwargs
306
): 
307
    """
308
    HoverCard trigger element.
309
    
310
    Parameters:
311
    - children: Element that triggers hover card
312
    """
313

314
def HoverCardDropdown(
315
    children=None,  # Card content
316
    **kwargs
317
): 
318
    """
319
    HoverCard content container.
320
    
321
    Parameters:
322
    - children: Rich content to display in card
323
    """
324
```
325

326
### Breadcrumb Navigation
327

328
Hierarchical navigation showing current location.
329

330
```python { .api }
331
def Breadcrumbs(
332
    children=None,  # Breadcrumb items
333
    separator=">",  # Separator between items
334
    separatorMargin="xs",  # Margin around separator
335
    **kwargs
336
): 
337
    """
338
    Breadcrumb navigation component.
339
    
340
    Parameters:
341
    - children: List of navigation items (Anchor, Text, etc.)
342
    - separator: Character/element between items
343
    - separatorMargin: Spacing around separator
344
    """
345
```
346

347
### Pagination
348

349
Page navigation for large datasets.
350

351
```python { .api }
352
def Pagination(
353
    total=1,  # Total number of pages
354
    value=1,  # Current page
355
    siblings=1,  # Sibling pages shown
356
    boundaries=1,  # Boundary pages shown
357
    size="md",  # Pagination size
358
    radius="sm",  # Border radius
359
    color="blue",  # Active page color
360
    disabled=False,  # Disable all controls
361
    withEdges=True,  # Show first/last buttons
362
    **kwargs
363
): 
364
    """
365
    Pagination navigation component.
366
    
367
    Parameters:
368
    - total: Total number of pages
369
    - value: Currently active page number
370
    - siblings: Pages shown around current page
371
    - boundaries: Pages shown at start/end
372
    - size: Control size
373
    - radius: Border radius
374
    - color: Active page color
375
    - disabled: Disable interaction
376
    - withEdges: Show first/last page buttons
377
    """
378
```
379

380
### Navigation Links
381

382
Styled navigation link components.
383

384
```python { .api }
385
def NavLink(
386
    children=None,  # Link content
387
    label="",  # Link text
388
    description="",  # Subtitle text
389
    icon=None,  # Left icon
390
    rightSection=None,  # Right content
391
    active=False,  # Active state
392
    disabled=False,  # Disabled state
393
    variant="light",  # "light" | "filled" | "subtle"
394
    color="blue",  # Active color
395
    **kwargs
396
): 
397
    """
398
    Navigation link component.
399
    
400
    Parameters:
401
    - children: Child NavLink components for nesting
402
    - label: Main link text
403
    - description: Subtitle text
404
    - icon: Left-side icon
405
    - rightSection: Right-side content
406
    - active: Highlight as active
407
    - disabled: Disable interaction
408
    - variant: Link style
409
    - color: Active state color
410
    """
411

412
def Anchor(
413
    children=None,  # Link content
414
    href="#",  # Link URL
415
    target=None,  # Link target
416
    **kwargs
417
): 
418
    """
419
    Styled anchor link component.
420
    
421
    Parameters:
422
    - children: Link text/content
423
    - href: Link destination URL
424
    - target: Link target (_blank, etc.)
425
    """
426
```
427

428
## Usage Examples
429

430
### Dropdown Menu
431

432
```python
433
import dash_mantine_components as dmc
434

435
menu = dmc.Menu([
436
    dmc.MenuTarget([
437
        dmc.Button("Open Menu", variant="outline")
438
    ]),
439
    dmc.MenuDropdown([
440
        dmc.MenuLabel("Application"),
441
        dmc.MenuItem("Settings", icon="⚙️"),
442
        dmc.MenuItem("Messages", icon="💬", rightSection="⌘K"),
443
        dmc.MenuDivider(),
444
        dmc.MenuLabel("Danger Zone"),
445
        dmc.MenuItem("Delete Account", icon="🗑️", color="red")
446
    ])
447
])
448
```
449

450
### Tab Navigation
451

452
```python
453
tabs = dmc.Tabs([
454
    dmc.TabsList([
455
        dmc.TabsTab("Overview", value="overview", icon="📊"),
456
        dmc.TabsTab("Analytics", value="analytics", icon="📈"),
457
        dmc.TabsTab("Settings", value="settings", icon="⚙️")
458
    ]),
459
    
460
    dmc.TabsPanel([
461
        dmc.Text("Overview content goes here...")
462
    ], value="overview"),
463
    
464
    dmc.TabsPanel([
465
        dmc.Text("Analytics content goes here...")
466
    ], value="analytics"),
467
    
468
    dmc.TabsPanel([
469
        dmc.Text("Settings content goes here...")
470
    ], value="settings")
471
], value="overview")
472
```
473

474
### Tooltip and Popover
475

476
```python
477
interactive = dmc.Group([
478
    dmc.Tooltip([
479
        dmc.Button("Hover for tooltip")
480
    ], label="This is a helpful tooltip"),
481
    
482
    dmc.Popover([
483
        dmc.PopoverTarget([
484
            dmc.Button("Click for popover")
485
        ]),
486
        dmc.PopoverDropdown([
487
            dmc.Stack([
488
                dmc.Text("Popover Content", weight=500),
489
                dmc.Text("This is more detailed information in a popover."),
490
                dmc.Button("Action", size="sm")
491
            ])
492
        ])
493
    ], width=300, withArrow=True)
494
])
495
```
496

497
### Navigation Structure
498

499
```python
500
navigation = dmc.Stack([
501
    dmc.Breadcrumbs([
502
        dmc.Anchor("Home", href="/"),
503
        dmc.Anchor("Products", href="/products"),
504
        dmc.Text("Laptops")
505
    ]),
506
    
507
    dmc.Stack([
508
        dmc.NavLink(
509
            label="Dashboard",
510
            icon="📊",
511
            active=True
512
        ),
513
        dmc.NavLink(
514
            label="Products",
515
            icon="📦",
516
            children=[
517
                dmc.NavLink(label="All Products"),
518
                dmc.NavLink(label="Categories"),
519
                dmc.NavLink(label="Inventory")
520
            ]
521
        ),
522
        dmc.NavLink(
523
            label="Orders",
524
            icon="🛒",
525
            rightSection=dmc.Badge("12", size="sm")
526
        )
527
    ], spacing="xs"),
528
    
529
    dmc.Pagination(total=20, value=1, siblings=2)
530
])
531
```