You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: navigation.mdx
+98Lines changed: 98 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -462,6 +462,104 @@ We currently support the following languages for localization:
462
462
463
463
For automated translations, [contact our sales team](mailto:[email protected]) to discuss solutions.
464
464
465
+
## Combining navigation types
466
+
467
+
You can combine different navigation types to create sophisticated documentation structures that match your content organization needs. Each navigation type serves different purposes and can be strategically combined for optimal user experience.
468
+
469
+
### Common combinations
470
+
471
+
**Tabs with groups and pages** - Use tabs to separate major sections, groups to organize content within each tab, and pages for individual topics:
472
+
473
+
```json
474
+
{
475
+
"navigation": {
476
+
"tabs": [
477
+
{
478
+
"tab": "User Guide",
479
+
"groups": [
480
+
{
481
+
"group": "Getting started",
482
+
"pages": ["quickstart", "installation"]
483
+
},
484
+
{
485
+
"group": "Advanced features",
486
+
"pages": ["customization", "integrations"]
487
+
}
488
+
]
489
+
},
490
+
{
491
+
"tab": "API Reference",
492
+
"groups": [
493
+
{
494
+
"group": "Authentication",
495
+
"pages": ["auth/overview", "auth/tokens"]
496
+
}
497
+
]
498
+
}
499
+
]
500
+
}
501
+
}
502
+
```
503
+
504
+
**Anchors with tabs** - Use anchors for persistent navigation to key resources while organizing main content in tabs:
505
+
506
+
```json
507
+
{
508
+
"navigation": {
509
+
"anchors": [
510
+
{
511
+
"anchor": "Support",
512
+
"icon": "life-buoy",
513
+
"href": "https://support.example.com"
514
+
}
515
+
],
516
+
"tabs": [
517
+
{
518
+
"tab": "Documentation",
519
+
"pages": ["overview", "guides"]
520
+
},
521
+
{
522
+
"tab": "API",
523
+
"pages": ["api/introduction"]
524
+
}
525
+
]
526
+
}
527
+
}
528
+
```
529
+
530
+
**Dropdowns with nested groups** - Use dropdowns for version or product selection with organized content underneath:
531
+
532
+
```json
533
+
{
534
+
"navigation": {
535
+
"dropdowns": [
536
+
{
537
+
"dropdown": "v2.0 Documentation",
538
+
"groups": [
539
+
{
540
+
"group": "Core concepts",
541
+
"pages": ["v2/concepts", "v2/architecture"]
542
+
},
543
+
{
544
+
"group": "API Reference",
545
+
"pages": ["v2/api/users", "v2/api/products"]
546
+
}
547
+
]
548
+
}
549
+
]
550
+
}
551
+
}
552
+
```
553
+
554
+
### Best practices for combining types
555
+
556
+
-**Use tabs** for major content divisions (user docs vs API docs vs tutorials)
557
+
-**Use groups** to organize related pages within a section
558
+
-**Use anchors** for persistent access to external resources or key internal pages
559
+
-**Use dropdowns** for version selection or when you have multiple product lines
560
+
-**Limit nesting depth** to 3 levels maximum to avoid overwhelming users
561
+
-**Be consistent** with naming conventions and icon usage across navigation types
562
+
465
563
## Nesting
466
564
467
565
You can use any combination of anchors, tabs, and dropdowns. The components can be nested within each other interchangeably to create your desired navigation structure.
0 commit comments