diff --git a/navigation.mdx b/navigation.mdx index bbc801c64..3464e35db 100644 --- a/navigation.mdx +++ b/navigation.mdx @@ -462,6 +462,104 @@ We currently support the following languages for localization: For automated translations, [contact our sales team](mailto:gtm@mintlify.com) to discuss solutions. +## Combining navigation types + +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. + +### Common combinations + +**Tabs with groups and pages** - Use tabs to separate major sections, groups to organize content within each tab, and pages for individual topics: + +```json +{ + "navigation": { + "tabs": [ + { + "tab": "User Guide", + "groups": [ + { + "group": "Getting started", + "pages": ["quickstart", "installation"] + }, + { + "group": "Advanced features", + "pages": ["customization", "integrations"] + } + ] + }, + { + "tab": "API Reference", + "groups": [ + { + "group": "Authentication", + "pages": ["auth/overview", "auth/tokens"] + } + ] + } + ] + } +} +``` + +**Anchors with tabs** - Use anchors for persistent navigation to key resources while organizing main content in tabs: + +```json +{ + "navigation": { + "anchors": [ + { + "anchor": "Support", + "icon": "life-buoy", + "href": "https://support.example.com" + } + ], + "tabs": [ + { + "tab": "Documentation", + "pages": ["overview", "guides"] + }, + { + "tab": "API", + "pages": ["api/introduction"] + } + ] + } +} +``` + +**Dropdowns with nested groups** - Use dropdowns for version or product selection with organized content underneath: + +```json +{ + "navigation": { + "dropdowns": [ + { + "dropdown": "v2.0 Documentation", + "groups": [ + { + "group": "Core concepts", + "pages": ["v2/concepts", "v2/architecture"] + }, + { + "group": "API Reference", + "pages": ["v2/api/users", "v2/api/products"] + } + ] + } + ] + } +} +``` + +### Best practices for combining types + +- **Use tabs** for major content divisions (user docs vs API docs vs tutorials) +- **Use groups** to organize related pages within a section +- **Use anchors** for persistent access to external resources or key internal pages +- **Use dropdowns** for version selection or when you have multiple product lines +- **Limit nesting depth** to 3 levels maximum to avoid overwhelming users +- **Be consistent** with naming conventions and icon usage across navigation types + ## Nesting 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.