Interactive Components (Tabs, Accordions)

This documentation project utilizes interactive components to structure navigation and organize content. The primary interactive component detailed in the configuration is the tab-based navigation system, which divides the documentation into high-level sections like "Guides" and "API reference". The starter kit is explicitly designed to showcase the use of such popular components. While the configuration for navigation tabs is explicit, components like accordions are used within content pages (.mdx files) to manage complex information, such as in the rendered API documentation.

Sources: README.md:5-9, docs.json

Navigation Tabs

The main site navigation is controlled by a tabbed interface defined in docs.json. This file contains a navigation object that structures the entire user-facing menu system. The top-level organizational unit is the "tab".

Sources: docs.json:10-12

Configuration Structure

The navigation is configured through the navigation.tabs array in docs.json. Each object in this array represents a top-level tab visible to the user. These tabs, in turn, contain groups of pages, creating a hierarchical navigation structure.

The diagram below illustrates the configuration hierarchy for navigation.

This diagram shows the nested structure within docs.json that defines the navigation tabs and their content.

Sources: docs.json:11-55

Tab Configuration Details

Each tab is an object with specific properties to define its content and structure. The primary properties are tab for the display name and groups for the content organization.

Sources: docs.json:12-13, docs.json:40-41

Below is a code snippet from docs.json showing the configuration for the "Guides" and "API reference" tabs.

"navigation": {
  "tabs": [
    {
      "tab": "Guides",
      "groups": [
        {
          "group": "Getting started",
          "pages": [
            "index",
            "quickstart",
            "development"
          ]
        },
        {
          "group": "Customization",
          "pages": [
            "essentials/settings",
            "essentials/navigation"
          ]
        }
      ]
    },
    {
      "tab": "API reference",
      "groups": [
        {
          "group": "API documentation",
          "pages": [
            "api-reference/introduction"
          ]
        }
      ]
    }
  ]
}

Sources: docs.json:10-55

API Reference Components

The API reference section of the documentation is generated from an OpenAPI specification file. Mintlify renders this specification using interactive components, likely including accordions or expandable sections, to display details for each endpoint, parameter, and schema.

Sources: api-reference/openapi.json, docs.json:40-52

Endpoint Rendering

The paths object in api-reference/openapi.json defines the API endpoints. Each path and its associated HTTP methods (e.g., GET, POST) are typically rendered as individual, expandable components in the UI. This allows users to view high-level endpoint information and expand a section to see details like parameters, request bodies, and responses.

The following diagram shows a conceptual flow of how an OpenAPI path definition is rendered into an interactive UI component.

This illustrates the transformation from a JSON object to a user-friendly, accordion-based interface.

Sources: api-reference/openapi.json:20-94

Schema and Component Organization

Similarly, the components.schemas in the OpenAPI file are used to define data models like Plant and Error. In the rendered documentation, these schemas are often displayed in tables or definition lists, which may be nested within the accordion of the relevant API endpoint response. This use of nested components helps manage complexity and keeps the documentation clean.

The NewPlant schema demonstrates composition using allOf, which combines the Plant schema with an id property. This structure is well-suited for a UI that can expand to show the constituent parts of a complex object.

This diagram shows the relationship between NewPlant and Plant schemas as defined in the OpenAPI specification.

Sources: api-reference/openapi.json:126-155

Summary

Interactive components are a core part of the content strategy in this Mintlify project. Tabs are explicitly configured in docs.json to create a clear and organized top-level navigation structure, separating guides from API references. Within the content itself, particularly in the auto-generated API documentation from api-reference/openapi.json, components like accordions and expandable sections are implicitly used to present complex, nested information in a digestible format. This component-based architecture is a key feature highlighted in the project's starter kit.

Sources: README.md:5-9, docs.json:10-55