Skip to content

Commit d9a61ba

Browse files
Update navigation.mdx
1 parent bb0204c commit d9a61ba

File tree

1 file changed

+98
-0
lines changed

1 file changed

+98
-0
lines changed

navigation.mdx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,104 @@ We currently support the following languages for localization:
462462

463463
For automated translations, [contact our sales team](mailto:[email protected]) to discuss solutions.
464464

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+
465563
## Nesting
466564

467565
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

Comments
 (0)