diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 76f6e5c3a..26aa5697b 100644 --- a/organize/navigation.mdx +++ b/organize/navigation.mdx @@ -119,6 +119,220 @@ Use the `expanded` property to control the default state of a nested group in th } ``` +### Tags and labels + +Use tags to highlight important navigation items and draw attention to new, updated, or deprecated content. Tags appear as small labels next to navigation group names in the sidebar. + +Navigation groups with tags displayed in the sidebar. + +Navigation groups with tags displayed in the sidebar. + +#### Adding tags to groups + +Add the `tag` field to any group object in your navigation configuration. The tag value is a string that appears next to the group name. + +```json +{ + "navigation": { + "groups": [ + { + "group": "API v2", + "tag": "NEW", + "icon": "square-terminal", + "pages": ["api-v2/overview", "api-v2/authentication"] + }, + { + "group": "Experimental features", + "tag": "BETA", + "icon": "flask", + "pages": ["experimental/feature-a", "experimental/feature-b"] + }, + { + "group": "Legacy API", + "tag": "DEPRECATED", + "icon": "triangle-exclamation", + "pages": ["legacy/overview", "legacy/endpoints"] + } + ] + } +} +``` + +#### Tag best practices + +Use tags strategically to guide users to the most relevant content: + +- **NEW**: Highlight recently added features, endpoints, or documentation sections +- **BETA**: Indicate features in testing that may change or have limited support +- **DEPRECATED**: Mark outdated content that will be removed in future versions +- **UPDATED**: Draw attention to recently revised documentation +- **PREVIEW**: Identify features available for early access or testing +- **PRO** or **ENTERPRISE**: Denote premium or tier-specific features + +Keep tag text short and clear. Tags with more than 12 characters may be truncated in the sidebar. + +#### Tags with different navigation elements + +Tags work with groups, tabs, anchors, and other navigation elements. Use them consistently across your navigation structure. + + + +```json Groups with tags +{ + "navigation": { + "groups": [ + { + "group": "Getting started", + "pages": ["quickstart", "installation"] + }, + { + "group": "Advanced features", + "tag": "NEW", + "pages": ["webhooks", "custom-domains"] + }, + { + "group": "Migration guides", + "tag": "UPDATED", + "pages": ["v1-to-v2", "breaking-changes"] + } + ] + } +} +``` + +```json Tabs with nested tagged groups +{ + "navigation": { + "tabs": [ + { + "tab": "Documentation", + "icon": "book-open", + "groups": [ + { + "group": "Core concepts", + "pages": ["concepts/authentication", "concepts/rate-limits"] + }, + { + "group": "Real-time features", + "tag": "BETA", + "icon": "bolt", + "pages": ["realtime/websockets", "realtime/streaming"] + } + ] + }, + { + "tab": "API Reference", + "icon": "code", + "groups": [ + { + "group": "REST API v3", + "tag": "NEW", + "pages": ["api/v3/users", "api/v3/projects"] + }, + { + "group": "REST API v2", + "tag": "DEPRECATED", + "pages": ["api/v2/users", "api/v2/projects"] + } + ] + } + ] + } +} +``` + +```json Anchors with tagged groups +{ + "navigation": { + "anchors": [ + { + "anchor": "Documentation", + "icon": "book-open", + "groups": [ + { + "group": "Getting started", + "pages": ["quickstart", "setup"] + }, + { + "group": "AI integrations", + "tag": "PREVIEW", + "icon": "brain", + "pages": ["ai/overview", "ai/embeddings"] + } + ] + } + ] + } +} +``` + +```json Products with tagged groups +{ + "navigation": { + "products": [ + { + "product": "Platform", + "icon": "server", + "groups": [ + { + "group": "Core features", + "pages": ["platform/overview", "platform/deployment"] + }, + { + "group": "Edge functions", + "tag": "BETA", + "icon": "globe", + "pages": ["platform/edge/overview", "platform/edge/runtime"] + } + ] + } + ] + } +} +``` + + + +#### Styling considerations + +Tags inherit your documentation's primary color scheme by default. The appearance adapts automatically to light and dark modes. + +Tags display inline with the group name and icon. When combined with icons, ensure your navigation remains scannable: + +```json +{ + "group": "Webhooks", + "tag": "NEW", + "icon": "webhook", + "pages": ["webhooks/setup", "webhooks/events"] +} +``` + +For nested groups with tags, the tag appears at the appropriate nesting level: + +```json +{ + "group": "API Reference", + "pages": [ + "api/overview", + { + "group": "Experimental endpoints", + "tag": "BETA", + "expanded": false, + "pages": ["api/experimental/search", "api/experimental/batch"] + } + ] +} +``` + ## 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.