La proprietà navigation in docs.json controlla la struttura e la gerarchia delle informazioni della documentazione. Con una configurazione di navigazione appropriata, puoi organizzare i contenuti in modo che gli utenti trovino esattamente ciò che cercano.

Pagine

Le pagine sono il componente di navigazione più fondamentale. Le pagine corrispondono ai file MDX che compongono la documentazione. Nell’oggetto navigation, pages è un array in cui ogni voce deve indicare il percorso di un file di pagina.
{
  "navigation": {
    "pages": [
      "settings",
      "pages",
      "navigation",
      "themes",
      "custom-domain"
    ]
  }
}

Gruppi

Usa i gruppi per organizzare la navigazione della sidebar in sezioni. I gruppi possono essere annidati, etichettati con tag e visualizzati con icone. Nell’oggetto navigation, groups è un array in cui ogni elemento è un oggetto che richiede un campo group e un campo pages. I campi icon, tag ed expanded sono opzionali.
{
  "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"
        ]
      }
    ]
  }
}

Stato di espansione predefinito

Imposta expanded: true su un gruppo per renderlo espanso per impostazione predefinita nella barra laterale di navigazione. È utile per mettere in risalto le sezioni importanti o migliorare la reperibilità dei contenuti chiave.
{
  "group": "Getting started",
  "expanded": true,
  "pages": ["quickstart", "installation"]
}

Schede

Le schede creano sezioni distinte della documentazione con percorsi URL separati. Generano una barra di navigazione orizzontale nella parte superiore della documentazione che consente agli utenti di passare da una sezione all’altra. Nell’oggetto navigation, tabs è un array in cui ogni elemento è un oggetto che richiede il campo tab e può contenere altri campi di navigazione come gruppi, pagine, icone o link a pagine esterne.
{
  "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"
      }
    ]
  }
}
I menu aggiungono elementi di navigazione a discesa a una scheda. Usa i menu per aiutare gli utenti ad accedere direttamente a pagine specifiche all’interno di una scheda. Nell’oggetto navigation, menu è un array in cui ogni voce è un oggetto che richiede il campo item e può contenere altri campi di navigazione come gruppi, pagine, icone o collegamenti a pagine esterne.
{
  "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": "Gli SDK vengono utilizzati per interagire con l'API.",
            "pages": [
              "sdk/fetch",
              "sdk/create",
              "sdk/delete"
            ]
          }
        ]
      }
    ]
  }
}

Ancore

Le ancore aggiungono elementi di navigazione persistenti nella parte superiore della sidebar. Usa le ancore per suddividere i contenuti, fornire accesso rapido a risorse esterne o creare call to action in evidenza. Nell’oggetto navigation, anchors è un array in cui ogni voce è un oggetto che richiede il campo anchor e può contenere altri campi di navigazione come gruppi, pagine, icone o link a pagine esterne.
{
  "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"
      }
    ]
  }
}
Per le ancore che puntano esclusivamente a link esterni, usa la keyword global. Le ancore in un oggetto global devono avere un campo href e non possono puntare a un percorso relativo. Le ancore globali sono particolarmente utili per collegare risorse che non fanno parte della documentazione ma che dovrebbero essere facilmente accessibili agli utenti, come un blog o un portale di supporto.
{
  "navigation": {
    "global":  {
      "anchors": [
        {
          "anchor": "Community",
          "icon": "house",
          "href": "https://slack.com"
        },
        {
          "anchor": "Blog",
          "icon": "pencil",
          "href": "https://mintlify.com/blog"
        }
      ]
    },
    "tabs": /*...*/
  }
}
I menu a discesa sono contenuti in un menu espandibile nella parte superiore della barra laterale di navigazione. Ogni voce del menu a discesa rimanda a una sezione della documentazione. Nell’oggetto navigation, dropdowns è un array in cui ogni elemento è un oggetto che richiede il campo dropdown e può contenere altri campi di navigazione come gruppi, pagine, icone o link a pagine esterne.
{
  "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

Integra le specifiche OpenAPI direttamente nella struttura di navigazione per generare automaticamente la documentazione delle API. Crea sezioni API dedicate oppure inserisci le pagine degli endpoint all’interno di altri componenti di navigazione. Imposta una specifica OpenAPI predefinita a qualsiasi livello della gerarchia di navigazione. Gli elementi figli erediteranno questa specifica a meno che non ne definiscano una propria.
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
Per ulteriori informazioni su come fare riferimento agli endpoint OpenAPI nella tua documentazione, consulta la pagina OpenAPI setup.

Versioni

Suddividi la navigazione in versioni diverse. Le versioni sono selezionabili da un menu a discesa. Nell’oggetto navigation, versions è un array in cui ogni elemento è un oggetto che richiede un campo version e può contenere qualsiasi altro campo di navigazione.
{
  "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"]
          }
        ]
      }
    ]
  }
}

Lingue

Suddividi la navigazione in lingue diverse. Le lingue si selezionano da un menu a discesa. Nell’oggetto navigation, languages è un array in cui ogni elemento è un oggetto che richiede un campo language e può contenere qualsiasi altro campo di navigazione. Attualmente supportiamo le seguenti lingue per la localizzazione:

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"]
          }
        ]
      }
    ]
  }
}
Per traduzioni automatiche, contatta il nostro team commerciale per discutere le soluzioni.

Annidamento

Puoi usare qualsiasi combinazione di ancore, schede e menu a discesa. I componenti possono essere annidati tra loro in modo flessibile per creare la struttura di navigazione desiderata.
{
  "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"
            ]
          }
        ]
      }
    ]
  }
}
I breadcrumbs mostrano il percorso di navigazione completo nella parte superiore delle pagine. Alcuni temi li abilitano per impostazione predefinita, altri no. Puoi controllare se i breadcrumbs sono abilitati per il tuo sito usando la proprietà styling nel file docs.json.
"styling": {
  "eyebrows": "breadcrumbs"
}

Configurazione delle interazioni

Controlla come gli utenti interagiscono con gli elementi di navigazione usando la proprietà interaction nel file docs.json.

Abilita la navigazione automatica per i gruppi

Quando un utente espande un gruppo di navigazione, alcuni temi passeranno automaticamente alla prima pagina del gruppo. Puoi sovrascrivere il comportamento predefinito del tema usando l’opzione drilldown:
{
  "interaction": {
    "drilldown": true  // Forza la navigazione alla prima pagina quando un utente espande un menu a discesa
  }
}
{
  "interaction": {
    "drilldown": false // Non navigare mai, limita a espandere/comprimere
  }
}
  • Imposta su true per forzare la navigazione automatica alla prima pagina quando viene selezionato un gruppo di navigazione.
  • Imposta su false per impedire la navigazione e limitarsi a espandere o comprimere il gruppo quando viene selezionato.
  • Lascia non impostato per usare il comportamento predefinito del tema.