Die Eigenschaft navigation in docs.json steuert die Struktur und Informationshierarchie Ihrer Dokumentation. Mit einer geeigneten Navigationskonfiguration können Sie Ihre Inhalte so organisieren, dass Nutzer genau das finden, was sie suchen.

​
Seiten

Seiten sind die grundlegende Navigationseinheit. Sie entsprechen den MDX-Dateien, aus denen Ihre Dokumentation besteht. Im Objekt navigation ist pages ein Array, in dem jeder Eintrag den Pfad zu einer Seitendatei angeben muss. 
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}

​
Gruppen

Verwenden Sie Gruppen, um die Navigation in Ihrer Seitenleiste in Abschnitte zu gliedern. Gruppen können ineinander verschachtelt, mit Tags versehen und mit Icons dargestellt werden. Im Objekt navigation ist groups ein Array, in dem jeder Eintrag ein Objekt mit den erforderlichen Feldern group und pages ist. Die Felder icon, tag und expanded sind optional. 
{
  "navigation": {
    "groups": [
      {
        "group": "Getting started",
        "icon": "play",
        "expanded": false,
        "pages": [
          "quickstart",
          {
            "group": "Editing",
            "icon": "pencil",
            "pages": [
              "installation",
              "editor"
            ]
          }
        ]
      },
      {
        "group": "Writing content",
        "icon": "notebook-text",
        "tag": "NEW",
        "pages": [
          "writing-content/page",
          "writing-content/text"
        ]
      }
    ]
  }
}

​
Standardmäßig ausgeklappter Zustand

Setzen Sie expanded: true für eine Gruppe, damit sie in der Navigationsseitenleiste standardmäßig ausgeklappt ist. Das ist hilfreich, um wichtige Abschnitte hervorzuheben oder die Auffindbarkeit zentraler Inhalte zu verbessern. 
{
  "group": "Getting started",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

​
Tabs

Tabs erstellen separate Bereiche Ihrer Dokumentation mit eigenen URL-Pfaden. Sie fügen oben in Ihrer Dokumentation eine horizontale Navigationsleiste hinzu, über die Nutzende zwischen Bereichen wechseln können. Im Objekt navigation ist tabs ein Array, in dem jeder Eintrag ein Objekt ist, das ein tab-Feld erfordert und weitere Navigationsfelder wie Gruppen, Seiten, Icons oder Links zu externen Seiten enthalten kann. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "API reference",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "tab": "SDKs",
        "icon": "code",
        "pages": [
          "sdk/fetch",
          "sdk/create",
          "sdk/delete"
        ]
      },
      {
        "tab": "Blog",
        "icon": "newspaper",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
Menüs fügen einem Tab Dropdown-Navigationselemente hinzu. Verwenden Sie Menüs, damit Nutzende direkt zu bestimmten Seiten innerhalb eines Tabs springen können. Im Objekt navigation ist menu ein Array, in dem jeder Eintrag ein Objekt ist, das ein item-Feld erfordert und weitere Navigationselemente wie Gruppen, Seiten, Icons oder Links zu externen Seiten enthalten kann. 
{
  "navigation": {
    "tabs": [
      {
        "tab": "Developer tools",
        "icon": "square-terminal",
        "menu": [
          {
            "item": "API reference",
            "icon": "rocket",
            "groups": [
              {
                "group": "Core endpoints",
                "icon": "square-terminal",
                "pages": [
                  "api-reference/get",
                  "api-reference/post",
                  "api-reference/delete"
                ]
              }
            ]
          },
          {
            "item": "SDKs",
            "icon": "code",
            "description": "SDKs are used to interact with the API.",
            "pages": [
              "sdk/fetch",
              "sdk/create",
              "sdk/delete"
            ]
          }
        ]
      }
    ]
  }
}

​
Anker

Anker fügen oben in deiner Seitenleiste dauerhaft sichtbare Navigationselemente hinzu. Nutze Anker, um deine Inhalte zu gliedern, schnellen Zugriff auf externe Ressourcen zu bieten oder auffällige Call-to-Actions zu platzieren. Im navigation-Objekt ist anchors ein Array, in dem jeder Eintrag ein Objekt ist, das ein anchor-Feld erfordert und weitere Navigationsfelder wie Gruppen, Seiten, Icons oder Links zu externen Seiten enthalten kann. 
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Documentation",
        "icon": "book-open",
        "pages": [
          "quickstart",
          "development",
          "navigation"
        ]
      },
      {
        "anchor": "API reference",
        "icon": "square-terminal",
        "pages": [
          "api-reference/get",
          "api-reference/post",
          "api-reference/delete"
        ]
      },
      {
        "anchor": "Blog",
        "href": "https://external-link.com/blog"
      }
    ]
  }
}
Für Anker, die ausschließlich auf externe Links verweisen, verwende das Schlüsselwort global. Anker in einem global-Objekt müssen ein href-Feld haben und dürfen nicht auf einen relativen Pfad zeigen. Globale Anker sind besonders nützlich, um auf Ressourcen zu verlinken, die nicht Teil deiner Dokumentation sind, aber für deine Nutzer leicht zugänglich sein sollten, etwa ein Blog oder ein Support-Portal. 
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Community",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
Dropdowns befinden sich in einem ausklappbaren Menü oben in Ihrer Sidebar-Navigation. Jeder Eintrag in einem Dropdown verweist auf einen Abschnitt Ihrer Dokumentation. Im Objekt navigation ist dropdowns ein Array, in dem jeder Eintrag ein Objekt ist, das ein dropdown-Feld erfordert und weitere Navigationsfelder wie Gruppen, Seiten, Icons oder Links zu externen Seiten enthalten kann. 
{
  "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

Integrieren Sie OpenAPI-Spezifikationen direkt in Ihre Navigationsstruktur, um die API-Dokumentation automatisch zu generieren. Erstellen Sie eigene API-Bereiche oder platzieren Sie Endpunktseiten innerhalb anderer Navigationselemente. Legen Sie auf beliebigen Ebenen Ihrer Navigationshierarchie eine Standard-OpenAPI-Spezifikation fest. Untergeordnete Elemente übernehmen diese Spezifikation, sofern sie nicht eine eigene definieren. 
{
  "navigation": {
    "groups": [
      {
        "group": "API reference",
        "openapi": "/path/to/openapi-v1.json",
        "pages": [
          "overview",
          "authentication",
          "GET /users",
          "POST /users",
          {
            "group": "Products",
            "openapi": "/path/to/openapi-v2.json",
            "pages": [
              "GET /products",
              "POST /products"
            ]
          }
        ]
      }
    ]
  }
}
Weitere Informationen zum Referenzieren von OpenAPI-Endpunkten in Ihrer Dokumentation finden Sie unter OpenAPI setup.

​
Versionen

Unterteilen Sie Ihre Navigation in verschiedene Versionen. Versionen können über ein Dropdown-Menü ausgewählt werden. Im Objekt navigation ist versions ein Array, in dem jeder Eintrag ein Objekt mit dem erforderlichen Feld version ist und weitere Navigationsfelder enthalten kann. 
{
  "navigation": {
    "versions": [
      {
        "version": "1.0.0",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["v1/overview", "v1/quickstart", "v1/development"]
          }
        ]
      },
      {
        "version": "2.0.0",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["v2/overview", "v2/quickstart", "v2/development"]
          }
        ]
      }
    ]
  }
}

​
Sprachen

Unterteilen Sie Ihre Navigation in verschiedene Sprachen. Die Sprache kann über ein Dropdown-Menü ausgewählt werden. Im Objekt navigation ist languages ein Array, in dem jeder Eintrag ein Objekt mit einem erforderlichen Feld language ist und weitere Navigationsfelder enthalten kann. Wir unterstützen derzeit die folgenden Sprachen für die Lokalisierung:

Arabic (ar)

Chinese (cn)

Chinese (zh-Hant)

English (en)

French (fr)

German (de)

Indonesian (id)

Italian (it)

Japanese (jp)

Korean (ko)

Portuguese (pt-BR)

Russian (ru)

Spanish (es)

Turkish (tr)

{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["en/overview", "en/quickstart", "en/development"]
          }
        ]
      },
      {
        "language": "es",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["es/overview", "es/quickstart", "es/development"]
          }
        ]
      }
    ]
  }
}
Für automatisierte Übersetzungen kontaktieren Sie unser Vertriebsteam, um Lösungen zu besprechen.

​
Verschachtelung

Sie können beliebige Kombinationen aus Ankern, Tabs und Dropdowns verwenden. Die Komponenten lassen sich flexibel ineinander verschachteln, um die gewünschte Navigationsstruktur zu erstellen. 
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Anchor 1",
        "groups": [
          {
            "group": "Group 1",
            "pages": [
              "some-folder/file-1",
              "another-folder/file-2",
              "just-a-file"
            ]
          }
        ]
      },
      {
        "anchor": "Anchor 2",
        "groups": [
          {
            "group": "Group 2",
            "pages": [
              "some-other-folder/file-1",
              "various-different-folders/file-2",
              "another-file"
            ]
          }
        ]
      }
    ]
  }
}
Breadcrumbs zeigen den vollständigen Navigationspfad am oberen Rand der Seiten. In einigen Themes sind Breadcrumbs standardmäßig aktiviert, in anderen nicht. Sie können steuern, ob Breadcrumbs für Ihre Website aktiviert sind, indem Sie die Eigenschaft styling in Ihrer docs.json verwenden. 
"styling": {
  "eyebrows": "breadcrumbs"
}

​
Interaktionskonfiguration

Steuern Sie, wie Nutzer mit Navigationselementen interagieren, indem Sie die Eigenschaft interaction in Ihrer docs.json festlegen.

​
Automatische Navigation für Gruppen aktivieren

Wenn ein Nutzer eine Navigationsgruppe aufklappt, navigieren einige Themes automatisch zur ersten Seite der Gruppe. Das Standardverhalten eines Themes können Sie mit der Option drilldown überschreiben: 
{
  "interaction": {
    "drilldown": true  // Navigation zur ersten Seite erzwingen, wenn ein Nutzer ein Dropdown aufklappt
  }
}

{
  "interaction": {
    "drilldown": false // Nie navigieren, nur ein-/ausklappen
  }
}
  • Auf true setzen, um die automatische Navigation zur ersten Seite zu erzwingen, wenn eine Navigationsgruppe ausgewählt wird.
  • Auf false setzen, um die Navigation zu verhindern und die Gruppe beim Auswählen nur ein- oder auszuklappen.
  • Nicht setzen, um das Standardverhalten des Themes zu verwenden.