Refactor: Replace dropdowns with tabs for navigation

cursoragent · handotdev · cursoragent · commit 21446a570a3c · 2025-09-16T00:16:38.000Z
Co-authored-by: han &lt;han@mintlify.com&gt;
diff --git a/changelog.mdx b/changelog.mdx
@@ -418,7 +418,7 @@ noindex: true
   ## Other improvements
 
   - [Guide to Technical Writing:](https://mintlify.com/guides/introduction)Best practices for writing technical documentation, including audience research, content types, and writing tips.
-  - [Dropdown component](navigation#dropdowns): Organize navigation with a dropdown, in addition to tabs and anchors.
+  - [Tab component](navigation#tabs): Organize navigation with tabs and anchors for better user experience.
   - [AI syntax fixer](https://x.com/ricardonunez_io/status/1892334887644123192): The web editor will catch if there’s a parsing error and use AI to suggest fixes.
 </Update>
 
diff --git a/navigation.mdx b/navigation.mdx
@@ -157,7 +157,7 @@ In the `navigation` object, `tabs` is an array where each entry is an object tha
 
 ### Menus
 
-Menus add dropdown navigation items to a tab. Use menus to help users go directly to specific pages within a tab.
+Menus add sub-navigation items to a tab. Use menus to help users go directly to specific pages within a tab.
 
 In the `navigation` object, `menu` is an array where each entry is an object that requires an `item` field and can contain other navigation fields such as groups, pages, icons, or links to external pages.
 
@@ -274,52 +274,6 @@ Global anchors are particularly useful for linking to resources that are not par
 }
 ```
 
-## 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"
-  src="/images/navigation/dropdowns-light.png"
-/>
-
-<img
-  className="hidden dark:block pointer-events-none"
-  src="/images/navigation/dropdowns-dark.png"
-/>
-
-In the `navigation` object, `dropdowns` is an array where each entry is an object that requires a `dropdown` field and can contain other navigation fields such as groups, pages, icons, or links to external pages.
-
-```json
-{
-  "navigation": {
-    "dropdowns": [
-      {
-        "dropdown": "Documentation",
-        "icon": "book-open",
-        "pages": [
-          "quickstart",
-          "development",
-          "navigation"
-        ]
-      },
-      {
-        "dropdown": "API reference",
-        "icon": "square-terminal",
-        "pages": [
-          "api-reference/get",
-          "api-reference/post",
-          "api-reference/delete"
-        ]
-      },
-      {
-        "dropdown": "Blog",
-        "href": "https://external-link.com/blog"
-      }
-    ]
-  }
-}
-```
 
 ## OpenAPI
 
@@ -465,7 +419,7 @@ For automated translations, [contact our sales team](mailto:gtm@mintlify.com) to
 
 ## 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.
+You can use any combination of anchors and tabs. The components can be nested within each other interchangeably to create your desired navigation structure.
 
 <CodeGroup>
 
@@ -616,7 +570,7 @@ When a user expands a navigation group, some themes will automatically navigate
 ```json
 {
   "interaction": {
-    "drilldown": true  // Force navigation to first page when a user expands a dropdown
+    "drilldown": true  // Force navigation to first page when a user expands a navigation group
   }
 }
 ```
diff --git a/settings.mdx b/settings.mdx
@@ -393,21 +393,21 @@ See [Themes](themes) for more information.
           </Expandable>
         </ResponseField>
 
-        <ResponseField name="dropdowns" type="array of object">
-          Dropdown menus for organizing related content.
+        <ResponseField name="tabs" type="array of object">
+          Tab navigation for organizing content into distinct sections.
 
-          <Expandable title="Dropdowns">
-            <ResponseField name="dropdown" type="string" required>
-              Display name of the dropdown.
+          <Expandable title="Tabs">
+            <ResponseField name="tab" type="string" required>
+              Display name of the tab.
 
               Minimum length: 1
             </ResponseField>
             <IconsOptional />
             <ResponseField name="hidden" type="boolean">
-              Whether to hide this dropdown by default.
+              Whether to hide this tab by default.
             </ResponseField>
             <ResponseField name="href" type="string (uri)" required>
-              URL or path for the dropdown destination.
+              URL or path for the tab destination.
             </ResponseField>
           </Expandable>
         </ResponseField>
@@ -430,8 +430,8 @@ See [Themes](themes) for more information.
 
     </ResponseField>
 
-    <ResponseField name="dropdowns" type="array of object">
-      [Dropdowns](navigation#dropdowns) for grouping related content.
+    <ResponseField name="tabs" type="array of object">
+      [Tabs](navigation#tabs) for organizing content into distinct sections.
 
     </ResponseField>
     <ResponseField name="groups" type="array of object">
@@ -923,11 +923,10 @@ See [Themes](themes) for more information.
         "dark": "#0F172A"
       },
       "navigation": {
-        "dropdowns": [
+        "tabs": [
           {
-            "dropdown": "Documentation",
+            "tab": "Documentation",
             "icon": "book",
-            "description": "How to use the Example Co. product",
             "groups": [
               {
                 "group": "Getting started",
@@ -955,9 +954,8 @@ See [Themes](themes) for more information.
             ]
           },
           {
-            "dropdown": "Changelog",
+            "tab": "Changelog",
             "icon": "history",
-            "description": "Updates and changes",
             "pages": [
               "changelog"
             ]
@@ -1072,11 +1070,10 @@ See [Themes](themes) for more information.
         "dark": "#0F172A"
       },
       "navigation": {
-        "dropdowns": [
+        "tabs": [
           {
-            "dropdown": "Documentation",
+            "tab": "Documentation",
             "icon": "book",
-            "description": "How to use the Example Co. product",
             "groups": [
               {
                 "group": "Getting started",
@@ -1104,9 +1101,8 @@ See [Themes](themes) for more information.
             ]
           },
           {
-            "dropdown": "API reference",
+            "tab": "API reference",
             "icon": "terminal",
-            "description": "How to use the Example Co. API",
             "groups": [
               {
                 "group": "API reference",
@@ -1123,9 +1119,8 @@ See [Themes](themes) for more information.
             ]
           },
           {
-            "dropdown": "Changelog",
+            "tab": "Changelog",
             "icon": "history",
-            "description": "Updates and changes",
             "pages": [
               "changelog"
             ]
@@ -1263,12 +1258,11 @@ See [Themes](themes) for more information.
         "languages": [ // [!code highlight:3]
           {
             "language": "en",
-            "dropdowns": [
+            "tabs": [
               {
-                "dropdown": "Documentation",
+                "tab": "Documentation",
                 "icon": "book",
-                "description": "How to use the Example Co. product",
-                "pages": [
+                "groups": [
                   {
                     "group": "Getting started",
                     "pages": ["index", "quickstart"]
@@ -1288,21 +1282,19 @@ See [Themes](themes) for more information.
                 ]
               },
               {
-                "dropdown": "Changelog",
+                "tab": "Changelog",
                 "icon": "history",
-                "description": "Updates and changes",
                 "pages": ["changelog"]
               }
             ]
           },
           {
             "language": "es",// [!code highlight]
-            "dropdowns": [
+            "tabs": [
               {
-                "dropdown": "Documentación",
+                "tab": "Documentación",
                 "icon": "book",
-                "description": "Cómo usar el producto de Example Co.",
-                "pages": [
+                "groups": [
                   {
                     "group": "Comenzando",
                     "pages": ["es/index", "es/quickstart"]
@@ -1322,9 +1314,8 @@ See [Themes](themes) for more information.
                 ]
               },
               {
-                "dropdown": "Changelog",
+                "tab": "Changelog",
                 "icon": "history",
-                "description": "Actualizaciones y cambios",
                 "pages": ["es/changelog"]
               }
             ]

Original file line number	Diff line number	Diff line change
`@@ -393,21 +393,21 @@ See [Themes](themes) for more information.`
`393`	`393`	`</Expandable>`
`394`	`394`	`</ResponseField>`
`395`	`395`
`396`		`- <ResponseField name="dropdowns" type="array of object">`
`397`		`- Dropdown menus for organizing related content.`
	`396`	`+ <ResponseField name="tabs" type="array of object">`
	`397`	`+ Tab navigation for organizing content into distinct sections.`
`398`	`398`
`399`		`- <Expandable title="Dropdowns">`
`400`		`- <ResponseField name="dropdown" type="string" required>`
`401`		`- Display name of the dropdown.`
	`399`	`+ <Expandable title="Tabs">`
	`400`	`+ <ResponseField name="tab" type="string" required>`
	`401`	`+ Display name of the tab.`
`402`	`402`
`403`	`403`	`Minimum length: 1`
`404`	`404`	`</ResponseField>`
`405`	`405`	`<IconsOptional />`
`406`	`406`	`<ResponseField name="hidden" type="boolean">`
`407`		`- Whether to hide this dropdown by default.`
	`407`	`+ Whether to hide this tab by default.`
`408`	`408`	`</ResponseField>`
`409`	`409`	`<ResponseField name="href" type="string (uri)" required>`
`410`		`- URL or path for the dropdown destination.`
	`410`	`+ URL or path for the tab destination.`
`411`	`411`	`</ResponseField>`
`412`	`412`	`</Expandable>`
`413`	`413`	`</ResponseField>`
`@@ -430,8 +430,8 @@ See [Themes](themes) for more information.`
`430`	`430`
`431`	`431`	`</ResponseField>`
`432`	`432`
`433`		`- <ResponseField name="dropdowns" type="array of object">`
`434`		`- [Dropdowns](navigation#dropdowns) for grouping related content.`
	`433`	`+ <ResponseField name="tabs" type="array of object">`
	`434`	`+ [Tabs](navigation#tabs) for organizing content into distinct sections.`
`435`	`435`
`436`	`436`	`</ResponseField>`
`437`	`437`	`<ResponseField name="groups" type="array of object">`
`@@ -923,11 +923,10 @@ See [Themes](themes) for more information.`
`923`	`923`	`"dark": "#0F172A"`
`924`	`924`	`},`
`925`	`925`	`"navigation": {`
`926`		`- "dropdowns": [`
	`926`	`+ "tabs": [`
`927`	`927`	`{`
`928`		`- "dropdown": "Documentation",`
	`928`	`+ "tab": "Documentation",`
`929`	`929`	`"icon": "book",`
`930`		`- "description": "How to use the Example Co. product",`
`931`	`930`	`"groups": [`
`932`	`931`	`{`
`933`	`932`	`"group": "Getting started",`
`@@ -955,9 +954,8 @@ See [Themes](themes) for more information.`
`955`	`954`	`]`
`956`	`955`	`},`
`957`	`956`	`{`
`958`		`- "dropdown": "Changelog",`
	`957`	`+ "tab": "Changelog",`
`959`	`958`	`"icon": "history",`
`960`		`- "description": "Updates and changes",`
`961`	`959`	`"pages": [`
`962`	`960`	`"changelog"`
`963`	`961`	`]`
`@@ -1072,11 +1070,10 @@ See [Themes](themes) for more information.`
`1072`	`1070`	`"dark": "#0F172A"`
`1073`	`1071`	`},`
`1074`	`1072`	`"navigation": {`
`1075`		`- "dropdowns": [`
	`1073`	`+ "tabs": [`
`1076`	`1074`	`{`
`1077`		`- "dropdown": "Documentation",`
	`1075`	`+ "tab": "Documentation",`
`1078`	`1076`	`"icon": "book",`
`1079`		`- "description": "How to use the Example Co. product",`
`1080`	`1077`	`"groups": [`
`1081`	`1078`	`{`
`1082`	`1079`	`"group": "Getting started",`
`@@ -1104,9 +1101,8 @@ See [Themes](themes) for more information.`
`1104`	`1101`	`]`
`1105`	`1102`	`},`
`1106`	`1103`	`{`
`1107`		`- "dropdown": "API reference",`
	`1104`	`+ "tab": "API reference",`
`1108`	`1105`	`"icon": "terminal",`
`1109`		`- "description": "How to use the Example Co. API",`
`1110`	`1106`	`"groups": [`
`1111`	`1107`	`{`
`1112`	`1108`	`"group": "API reference",`
`@@ -1123,9 +1119,8 @@ See [Themes](themes) for more information.`
`1123`	`1119`	`]`
`1124`	`1120`	`},`
`1125`	`1121`	`{`
`1126`		`- "dropdown": "Changelog",`
	`1122`	`+ "tab": "Changelog",`
`1127`	`1123`	`"icon": "history",`
`1128`		`- "description": "Updates and changes",`
`1129`	`1124`	`"pages": [`
`1130`	`1125`	`"changelog"`
`1131`	`1126`	`]`
`@@ -1263,12 +1258,11 @@ See [Themes](themes) for more information.`
`1263`	`1258`	`"languages": [ // [!code highlight:3]`
`1264`	`1259`	`{`
`1265`	`1260`	`"language": "en",`
`1266`		`- "dropdowns": [`
	`1261`	`+ "tabs": [`
`1267`	`1262`	`{`
`1268`		`- "dropdown": "Documentation",`
	`1263`	`+ "tab": "Documentation",`
`1269`	`1264`	`"icon": "book",`
`1270`		`- "description": "How to use the Example Co. product",`
`1271`		`- "pages": [`
	`1265`	`+ "groups": [`
`1272`	`1266`	`{`
`1273`	`1267`	`"group": "Getting started",`
`1274`	`1268`	`"pages": ["index", "quickstart"]`
`@@ -1288,21 +1282,19 @@ See [Themes](themes) for more information.`
`1288`	`1282`	`]`
`1289`	`1283`	`},`
`1290`	`1284`	`{`
`1291`		`- "dropdown": "Changelog",`
	`1285`	`+ "tab": "Changelog",`
`1292`	`1286`	`"icon": "history",`
`1293`		`- "description": "Updates and changes",`
`1294`	`1287`	`"pages": ["changelog"]`
`1295`	`1288`	`}`
`1296`	`1289`	`]`
`1297`	`1290`	`},`
`1298`	`1291`	`{`
`1299`	`1292`	`"language": "es",// [!code highlight]`
`1300`		`- "dropdowns": [`
	`1293`	`+ "tabs": [`
`1301`	`1294`	`{`
`1302`		`- "dropdown": "Documentación",`
	`1295`	`+ "tab": "Documentación",`
`1303`	`1296`	`"icon": "book",`
`1304`		`- "description": "Cómo usar el producto de Example Co.",`
`1305`		`- "pages": [`
	`1297`	`+ "groups": [`
`1306`	`1298`	`{`
`1307`	`1299`	`"group": "Comenzando",`
`1308`	`1300`	`"pages": ["es/index", "es/quickstart"]`
`@@ -1322,9 +1314,8 @@ See [Themes](themes) for more information.`
`1322`	`1314`	`]`
`1323`	`1315`	`},`
`1324`	`1316`	`{`
`1325`		`- "dropdown": "Changelog",`
	`1317`	`+ "tab": "Changelog",`
`1326`	`1318`	`"icon": "history",`
`1327`		`- "description": "Actualizaciones y cambios",`
`1328`	`1319`	`"pages": ["es/changelog"]`
`1329`	`1320`	`}`
`1330`	`1321`	`]`