diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 76f6e5c3a..158e39cdc 100644 --- a/organize/navigation.mdx +++ b/organize/navigation.mdx @@ -119,6 +119,329 @@ 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 in light mode. + +Navigation groups with tags in dark mode. + +Add the `tag` field to any navigation group to display a label. Tags work with all navigation elements including groups, tabs, anchors, and dropdowns. + +```json +{ + "navigation": { + "groups": [ + { + "group": "Getting started", + "tag": "NEW", + "pages": ["quickstart", "installation"] + }, + { + "group": "API v2", + "tag": "BETA", + "pages": ["api/v2/overview", "api/v2/endpoints"] + }, + { + "group": "Legacy API", + "tag": "DEPRECATED", + "pages": ["api/v1/overview"] + } + ] + } +} +``` + +#### Common tag examples + +Tags are most effective when used consistently across your documentation. Here are common patterns: + + + +```json Status tags +{ + "navigation": { + "groups": [ + { + "group": "New features", + "tag": "NEW", + "icon": "sparkles", + "pages": ["features/ai-search", "features/analytics"] + }, + { + "group": "Beta features", + "tag": "BETA", + "icon": "flask", + "pages": ["beta/webhooks", "beta/graphql"] + }, + { + "group": "Experimental", + "tag": "ALPHA", + "icon": "vial", + "pages": ["experimental/realtime"] + } + ] + } +} +``` + +```json Version tags +{ + "navigation": { + "tabs": [ + { + "tab": "API v3", + "tag": "LATEST", + "icon": "code", + "pages": ["api/v3/overview"] + }, + { + "tab": "API v2", + "tag": "STABLE", + "icon": "code", + "pages": ["api/v2/overview"] + }, + { + "tab": "API v1", + "tag": "DEPRECATED", + "icon": "code", + "pages": ["api/v1/overview"] + } + ] + } +} +``` + +```json Update tags +{ + "navigation": { + "groups": [ + { + "group": "Authentication", + "tag": "UPDATED", + "pages": ["auth/oauth", "auth/api-keys"] + }, + { + "group": "Webhooks", + "tag": "IMPROVED", + "pages": ["webhooks/setup", "webhooks/events"] + } + ] + } +} +``` + +```json Priority tags +{ + "navigation": { + "anchors": [ + { + "anchor": "Security", + "tag": "IMPORTANT", + "icon": "shield", + "pages": ["security/overview", "security/best-practices"] + }, + { + "anchor": "Migration guide", + "tag": "REQUIRED", + "icon": "arrow-right", + "pages": ["migration/v2-to-v3"] + } + ] + } +} +``` + + + +#### Tags with different navigation elements + +Tags work consistently across all navigation components. You can apply them to groups, tabs, anchors, dropdowns, and products. + + + +```json Groups with tags +{ + "navigation": { + "groups": [ + { + "group": "Getting started", + "tag": "NEW", + "pages": ["quickstart"] + }, + { + "group": "Advanced topics", + "tag": "BETA", + "pages": ["advanced/webhooks"] + } + ] + } +} +``` + +```json Tabs with tags +{ + "navigation": { + "tabs": [ + { + "tab": "Documentation", + "pages": ["overview"] + }, + { + "tab": "API Reference", + "tag": "NEW", + "pages": ["api/overview"] + } + ] + } +} +``` + +```json Anchors with tags +{ + "navigation": { + "anchors": [ + { + "anchor": "Documentation", + "icon": "book-open", + "pages": ["quickstart"] + }, + { + "anchor": "Changelog", + "tag": "UPDATED", + "icon": "list", + "pages": ["changelog"] + } + ] + } +} +``` + +```json Dropdowns with tags +{ + "navigation": { + "dropdowns": [ + { + "dropdown": "Documentation", + "icon": "book-open", + "pages": ["overview"] + }, + { + "dropdown": "Beta features", + "tag": "BETA", + "icon": "flask", + "pages": ["beta/overview"] + } + ] + } +} +``` + +```json Products with tags +{ + "navigation": { + "products": [ + { + "product": "Platform", + "icon": "server", + "pages": ["platform/overview"] + }, + { + "product": "Analytics", + "tag": "NEW", + "icon": "chart-bar", + "pages": ["analytics/overview"] + } + ] + } +} +``` + + + +#### Nested groups with tags + +Tags can be applied to both parent and nested groups. This helps create a clear information hierarchy and highlight important sections at different levels. + +```json +{ + "navigation": { + "groups": [ + { + "group": "API Reference", + "tag": "NEW", + "icon": "code", + "pages": [ + "api/overview", + { + "group": "REST API", + "pages": ["api/rest/users", "api/rest/projects"] + }, + { + "group": "GraphQL API", + "tag": "BETA", + "pages": ["api/graphql/queries", "api/graphql/mutations"] + }, + { + "group": "Legacy API", + "tag": "DEPRECATED", + "pages": ["api/legacy/endpoints"] + } + ] + } + ] + } +} +``` + +#### Best practices for tags + +Follow these guidelines to use tags effectively: + +**Keep tags short and clear** +- Use 3-10 characters for optimal display +- Common effective tags: `NEW`, `BETA`, `ALPHA`, `DEPRECATED`, `UPDATED`, `STABLE`, `LATEST` +- Avoid long phrases that clutter the navigation + +**Use tags consistently** +- Define a standard set of tags for your documentation +- Use the same tag text for similar situations across all pages +- Document your tag meanings in a style guide + +**Don't overuse tags** +- Tag only the most important items that need attention +- Too many tags reduce their effectiveness +- Remove tags when content is no longer new or in beta + +**Update tags regularly** +- Remove `NEW` tags after a feature has been available for a few weeks +- Change `BETA` to `STABLE` when features are production-ready +- Keep `DEPRECATED` tags until content is removed + +**Combine tags with icons** +- Icons and tags work together to create visual hierarchy +- Use relevant icons that reinforce the tag meaning +- Example: `"icon": "sparkles"` with `"tag": "NEW"` + +#### Tag styling + +Tags automatically inherit your documentation's color scheme from the `colors` configuration in `docs.json`. The tag appearance adapts to your theme and adjusts for light and dark modes. + +Tags are styled to be visually distinct without overwhelming the navigation. They use subtle backgrounds and borders that complement your primary colors while maintaining readability. + + + Custom tag colors are not currently supported. Tags use your documentation's primary color scheme to maintain visual consistency. + + ## 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. diff --git a/quickstart.mdx b/quickstart.mdx index bc56bad0b..0a4ec5faf 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,11 +1,13 @@ --- title: "Quickstart" description: "Deploy your documentation site and make your first change." -keywords: ["quickstart", "deploy", "get started", "first steps", "tutorial", "setup", "onboarding"] +keywords: ["quickstart","deploy","get started","first steps","tutorial","setup","onboarding"] --- After you complete this guide, you'll have a live documentation site ready to customize and update. +fewafaewf + ## Before you begin Mintlify uses a docs-as-code approach to manage your documentation. Every page on your site has a corresponding file stored in your documentation repository. @@ -117,11 +119,16 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa Open the **Introduction** page and update the description. - Introduction page open in the web editor with the description edited to say Hello world!. - Introduction page open in the web editor with the description edited to say Hello world!. @@ -140,9 +147,11 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa Edit documentation in your browser and preview how your pages will look when published. + Find broken links, check accessibility, validate OpenAPI specs, and more. + Use your own domain for your documentation site. \ No newline at end of file