diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 459b1661a..6217154c1 100644 --- a/organize/navigation.mdx +++ b/organize/navigation.mdx @@ -119,6 +119,215 @@ Use the `expanded` property to control the default state of a nested group in th } ``` +### Tags and labels + +Use tags to highlight navigation groups with status indicators or labels. Tags appear as small badges next to group names in the sidebar, helping users identify new features, beta functionality, or deprecated content. + +Navigation groups with tags displayed in light mode. + +Navigation groups with tags displayed in dark mode. + +Add the `tag` field to any navigation group to display a label. Tags are most effective when used sparingly to draw attention to important changes or status. + +```json +{ + "navigation": { + "groups": [ + { + "group": "AI features", + "icon": "sparkles", + "tag": "NEW", + "pages": ["ai/chat", "ai/search"] + }, + { + "group": "Experimental APIs", + "icon": "flask", + "tag": "BETA", + "pages": ["api/experimental/webhooks"] + } + ] + } +} +``` + +#### Common tag patterns + +Use consistent tag labels across your documentation to create clear expectations for users. + + + +```json New features +{ + "group": "Real-time collaboration", + "icon": "users", + "tag": "NEW", + "pages": ["collaboration/overview", "collaboration/setup"] +} +``` + +```json Beta features +{ + "group": "Advanced analytics", + "icon": "chart-line", + "tag": "BETA", + "pages": ["analytics/custom-reports", "analytics/data-export"] +} +``` + +```json Deprecated features +{ + "group": "Legacy API", + "icon": "triangle-exclamation", + "tag": "DEPRECATED", + "pages": ["legacy/v1-endpoints", "legacy/migration-guide"] +} +``` + +```json Preview features +{ + "group": "Upcoming features", + "icon": "eye", + "tag": "PREVIEW", + "pages": ["preview/feature-a", "preview/feature-b"] +} +``` + +```json Updated content +{ + "group": "Security", + "icon": "shield", + "tag": "UPDATED", + "pages": ["security/authentication", "security/authorization"] +} +``` + + + +#### Tags with navigation elements + +Tags work with groups at any level of your navigation hierarchy. You can add tags to top-level groups, nested groups, and groups within tabs, anchors, or other navigation containers. + + + +```json Tags in tabs +{ + "navigation": { + "tabs": [ + { + "tab": "Documentation", + "groups": [ + { + "group": "Getting started", + "pages": ["quickstart"] + }, + { + "group": "New features", + "tag": "NEW", + "pages": ["features/ai-assistant", "features/real-time-sync"] + } + ] + } + ] + } +} +``` + +```json Tags in anchors +{ + "navigation": { + "anchors": [ + { + "anchor": "Documentation", + "icon": "book-open", + "groups": [ + { + "group": "Core concepts", + "pages": ["concepts/overview"] + }, + { + "group": "Advanced topics", + "tag": "BETA", + "pages": ["advanced/webhooks", "advanced/custom-integrations"] + } + ] + } + ] + } +} +``` + +```json Tags in nested groups +{ + "navigation": { + "groups": [ + { + "group": "API reference", + "pages": [ + { + "group": "Core endpoints", + "pages": ["api/users", "api/projects"] + }, + { + "group": "Experimental endpoints", + "tag": "BETA", + "pages": ["api/experimental/ai", "api/experimental/webhooks"] + } + ] + } + ] + } +} +``` + +```json Multiple tagged groups +{ + "navigation": { + "groups": [ + { + "group": "Platform features", + "tag": "NEW", + "pages": ["platform/overview"] + }, + { + "group": "Mobile SDK", + "tag": "BETA", + "pages": ["mobile/ios", "mobile/android"] + }, + { + "group": "Legacy features", + "tag": "DEPRECATED", + "pages": ["legacy/old-api"] + } + ] + } +} +``` + + + +#### Best practices for tags + +Follow these guidelines to use tags effectively in your documentation: + +- **Use sparingly**: Too many tags reduce their impact. Reserve tags for genuinely important status indicators. +- **Be consistent**: Use the same tag labels across your documentation. Avoid mixing "NEW" and "Latest" or "BETA" and "Experimental." +- **Keep labels short**: Tags work best with 3-10 characters. Long labels may be truncated or wrap awkwardly. +- **Update regularly**: Remove "NEW" tags after features are established. Update "BETA" to stable or remove the tag when features graduate. +- **Combine with icons**: Pair tags with relevant icons to reinforce meaning. For example, use a warning icon with "DEPRECATED" tags. +- **Consider color**: Tags inherit your theme colors. Ensure your primary color works well for all tag types. + + + Tags are purely visual indicators in the navigation. They do not affect page functionality, search indexing, or content visibility. + + ## Tabs Tabs create distinct sections of your documentation with separate URL paths. Tabs create a horizontal navigation bar at the top of your documentation that lets users switch between sections.