From 21446a570a3c06ee4c8e7a1e865e90b9e729536b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 16 Sep 2025 00:16:38 +0000 Subject: [PATCH] Refactor: Replace dropdowns with tabs for navigation Co-authored-by: han --- changelog.mdx | 2 +- navigation.mdx | 52 +++------------------------------------------ settings.mdx | 57 +++++++++++++++++++++----------------------------- 3 files changed, 28 insertions(+), 83 deletions(-) diff --git a/changelog.mdx b/changelog.mdx index 8a0e11113..0ee70c441 100644 --- 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. diff --git a/navigation.mdx b/navigation.mdx index c8e9fe3f4..0f40fc53d 100644 --- 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. - - - - - -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. @@ -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 index 778b78a96..408c6d522 100644 --- a/settings.mdx +++ b/settings.mdx @@ -393,21 +393,21 @@ See [Themes](themes) for more information. - - Dropdown menus for organizing related content. + + Tab navigation for organizing content into distinct sections. - - - Display name of the dropdown. + + + Display name of the tab. Minimum length: 1 - Whether to hide this dropdown by default. + Whether to hide this tab by default. - URL or path for the dropdown destination. + URL or path for the tab destination. @@ -430,8 +430,8 @@ See [Themes](themes) for more information. - - [Dropdowns](navigation#dropdowns) for grouping related content. + + [Tabs](navigation#tabs) for organizing content into distinct sections. @@ -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"] } ]