---
title: 'Configuration'
description: 'Customize your site with the `docs.json` file'
icon: 'gear'
---

Every Mintlify site is configured through a `docs.json` file in your project root. Changes take effect immediately in local preview.

## Identity

Set the name, theme, and visual identity of your site.

```json docs.json
{
  "name": "Acme Docs",
  "theme": "mint",
  "favicon": "/favicon.svg",
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg"
  }
}
```

<ResponseField name="name" type="string" required>
  Your project name. Appears in the browser tab title and site metadata.
</ResponseField>

<ResponseField name="theme" type="string">
  The visual theme. Options: `mint`, `maple`, `willow`, `sequoia`, `prism`.
</ResponseField>

<ResponseField name="favicon" type="string">
  Path to your favicon. SVG recommended for crisp rendering at all sizes.
</ResponseField>

<ResponseField name="logo" type="object">
  <Expandable title="Logo">
    <ResponseField name="light" type="string">Logo shown in light mode.</ResponseField>
    <ResponseField name="dark" type="string">Logo shown in dark mode.</ResponseField>
    <ResponseField name="href" type="string" default="/">URL the logo links to.</ResponseField>
  </Expandable>
</ResponseField>

## Colors

```json docs.json
{
  "colors": {
    "primary": "#16A34A",
    "light": "#07C983",
    "dark": "#15803D"
  }
}
```

<ResponseField name="colors.primary" type="string" required>
  Primary brand color. Used for highlights, active states, and accents in light mode.
</ResponseField>

<ResponseField name="colors.light" type="string">
  Primary color for dark mode.
</ResponseField>

<ResponseField name="colors.dark" type="string">
  Used for buttons and important interactive elements.
</ResponseField>

<ResponseField name="colors.background" type="object">
  Override the default page background color.
  <Expandable title="Background">
    <ResponseField name="light" type="string">Background hex color in light mode.</ResponseField>
    <ResponseField name="dark" type="string">Background hex color in dark mode.</ResponseField>
  </Expandable>
</ResponseField>

## Navbar

Configure the top navigation bar links and primary call-to-action.

```json docs.json
{
  "navbar": {
    "links": [
      { "label": "Support", "href": "mailto:support@example.com" }
    ],
    "primary": {
      "type": "button",
      "label": "Dashboard",
      "href": "https://dashboard.example.com"
    }
  }
}
```

<ResponseField name="navbar.links" type="array">
  Text links displayed in the top navigation bar.
  <Expandable title="Link">
    <ResponseField name="label" type="string">Display text for the link.</ResponseField>
    <ResponseField name="href" type="string">URL the link points to.</ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="navbar.primary" type="object">
  The prominent call-to-action in the top-right corner.
  <Expandable title="Primary">
    <ResponseField name="type" type='"button" | "github"'>
      `button` renders a CTA button. `github` renders a star count badge.
    </ResponseField>
    <ResponseField name="label" type="string">Button label. Required when type is `button`.</ResponseField>
    <ResponseField name="href" type="string">URL the button or badge links to.</ResponseField>
  </Expandable>
</ResponseField>

## Navigation

Organize your pages into tabs and groups. See the [Navigation](/essentials/navigation) guide for full details.

```json docs.json
{
  "navigation": {
    "tabs": [
      {
        "tab": "Guides",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["index", "quickstart"]
          }
        ]
      }
    ],
    "global": {
      "anchors": [
        {
          "anchor": "Blog",
          "href": "https://example.com/blog",
          "icon": "newspaper"
        }
      ]
    }
  }
}
```

## Contextual toolbar

The contextual toolbar floats on every page and gives readers one-click access to AI tools and integrations. See [Contextual toolbar](/agent-ready/contextual) for the full list of options.

```json docs.json
{
  "contextual": {
    "options": ["copy", "view", "claude", "mcp", "cursor", "vscode"]
  }
}
```

## Footer

```json docs.json
{
  "footer": {
    "socials": {
      "x": "https://x.com/yourhandle",
      "github": "https://github.com/yourorg",
      "linkedin": "https://linkedin.com/company/yourco"
    }
  }
}
```

<ResponseField name="footer.socials" type="object">
  Social links shown in the footer. Supported keys: `x`, `github`, `linkedin`, `discord`, `slack`, `facebook`, `instagram`, `website`.
</ResponseField>