Add comprehensive tag documentation to navigation guide

organize/navigation.mdx

@@ -98,11 +98,11 @@
 
 Use the `expanded` property to control the default state of a nested group in the navigation sidebar.
 
 - `expanded: true`: Group is expanded by default.
 - `expanded: false` or omitted: Group is collapsed by default.
 
 <Note>
   The `expanded` property only affects nested groups--groups within groups. Top-level groups are always expanded and cannot be collapsed.
 </Note>
 
 ```json
@@ -119,6 +119,329 @@
 }
 ```
 
+### 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.
+
+<img
+  className="block dark:hidden pointer-events-none"
+  src="/images/navigation/tags-light.png"
+  alt="Navigation groups with tags in light mode."
+/>
+
+<img
+  className="hidden dark:block pointer-events-none"
+  src="/images/navigation/tags-dark.png"
+  alt="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:
+
+<CodeGroup>
+
+```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"]
+      }
+    ]
+  }
+}
+```
+
+</CodeGroup>
+
+#### Tags with different navigation elements
+
+Tags work consistently across all navigation components. You can apply them to groups, tabs, anchors, dropdowns, and products.
+
+<CodeGroup>
+
+```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"]
+      }
+    ]
+  }
+}
+```
+
+</CodeGroup>
+
+#### 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.
+
+<Note>
+  Custom tag colors are not currently supported. Tags use your documentation's primary color scheme to maintain visual consistency.
+</Note>
+
 ## 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.
@@ -296,7 +619,7 @@
 
 ## Dropdowns
 
 Dropdowns are contained in an expandable menu at the top of your sidebar navigation. Each item in a dropdown directs to a section of your documentation.
 
 <img
   className="block dark:hidden pointer-events-none"
@@ -411,7 +734,7 @@
 
 Integrate OpenAPI specifications directly into your navigation structure to automatically generate API documentation. Create dedicated API sections or place endpoint pages within other navigation components.
 
 Set a default OpenAPI specification at any level of your navigation hierarchy. Child elements will inherit this specification unless they define their own specification.
 
 <Note>
   When you add the `openapi` property to a navigation element (such as an anchor, tab, or group) without specifying any pages, Mintlify automatically generates pages for **all endpoints** defined in your OpenAPI specification.
@@ -581,7 +904,7 @@
 
 ## Nesting
 
 Navigation elements can be nested within each other to create complex hierarchies. You must have one root-level parent navigation element such as tabs, groups, or a dropdown. You can nest other types of navigation elements within your primary navigation pattern.
 
 Each navigation element can contain one type of child element at each level of your navigation hierarchy. For example, a tab can contain anchors that contain groups, but a tab cannot contain both anchors and groups at the same level.
 
@@ -805,7 +1128,7 @@
 
 ## Breadcrumbs
 
 Breadcrumbs display the full navigation path at the top of pages. Some themes have breadcrumbs enabled by default and others do not. You can control whether breadcrumbs are enabled for your site using the `styling` property in your `docs.json`.
 
 <CodeGroup>
 
@@ -829,10 +1152,10 @@
 
 ### Enable auto-navigation for groups
 
 When a user expands a navigation group, some themes will automatically navigate to the first page in the group. You can override a theme's default behavior using the `drilldown` option.
 
 - Set to `true` to force automatic navigation to the first page when a navigation group is selected.
 - Set to `false` to prevent navigation and only expand or collapse the group when it is selected.
 - Leave unset to use the theme's default behavior.
 
 <CodeGroup>

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 <Tooltip tip="Your documentation's source code where all files and their history are stored. The web editor connects to your documentation repository to access and modify content, or you can edit files locally in your preferred IDE.">repository</Tooltip>.
@@ -16,7 +18,7 @@
 
 Go to [mintlify.com/start](https://mintlify.com/start) and complete the onboarding process. During onboarding, you'll connect your GitHub account, create or select a repository for your documentation, and install the GitHub App to enable automatic deployments.
 
 After onboarding, your documentation site is deployed and accessible at your `.mintlify.app` URL.
 
 <AccordionGroup>
   <Accordion title="Optional: Skip connecting GitHub during onboarding">
@@ -56,7 +58,7 @@
   <Tab title="CLI">
     <Steps>
       <Step title="Install the CLI">
         The CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher. Use an LTS version for stability.
 
         <CodeGroup>
 
@@ -117,11 +119,16 @@
         Open the **Introduction** page and update the description.
 
         <Frame>
-          <img src="/images/quickstart/hello-world-light.png" alt="Introduction page open in the web editor with the description edited to say Hello world!." 
-          className="block dark:hidden"
+          <img
+            src="/images/quickstart/hello-world-light.png"
+            alt="Introduction page open in the web editor with the description edited to say Hello world!."
+            className="block dark:hidden"
           />
-          <img src="/images/quickstart/hello-world-dark.png" alt="Introduction page open in the web editor with the description edited to say Hello world!." 
-          className="hidden dark:block"
+
+          <img
+            src="/images/quickstart/hello-world-dark.png"
+            alt="Introduction page open in the web editor with the description edited to say Hello world!."
+            className="hidden dark:block"
           />
         </Frame>
       </Step>
@@ -138,11 +145,13 @@
 ## Next steps
 
 <Card title="Use the web editor" icon="mouse-pointer-2" horizontal href="/editor/index">
   Edit documentation in your browser and preview how your pages will look when published.
 </Card>
+
 <Card title="Explore CLI commands" icon="terminal" horizontal href="/installation#additional-commands">
   Find broken links, check accessibility, validate OpenAPI specs, and more.
 </Card>
+
 <Card title="Add a custom domain" icon="globe" horizontal href="/customize/custom-domain">
   Use your own domain for your documentation site.
 </Card>