Skip to main content
Control which UI elements appear in your documentation. Hide navigation elements, API sections, sidebars, and other components to create a cleaner, more focused user experience.

​
Hiding navigation elements

Use the hidden property to remove navigation elements from view while keeping them in your configuration.

​
Hide pages

Hide individual pages from navigation by setting hidden: true in the page’s frontmatter: 
---
title: "Internal documentation"
hidden: true
---
Hidden pages remain accessible via direct URL but don’t appear in navigation, search results, or sitemaps. See Hidden pages for more details.

​
Hide groups

Hide entire groups of pages by setting the hidden property in your docs.json: 
{
  "navigation": {
    "groups": [
      {
        "group": "Internal docs",
        "hidden": true,
        "pages": ["internal/page1", "internal/page2"]
      }
    ]
  }
}

​
Hide tabs

Hide tabs from the top navigation bar: 
{
  "navigation": {
    "tabs": [
      {
        "tab": "Beta features",
        "hidden": true,
        "pages": ["beta/feature1", "beta/feature2"]
      }
    ]
  }
}

​
Hide anchors

Hide anchors from the sidebar: 
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Legacy docs",
        "hidden": true,
        "pages": ["legacy/overview"]
      }
    ]
  }
}

​
Hide dropdowns

Hide dropdown menus: 
{
  "navigation": {
    "dropdowns": [
      {
        "dropdown": "Archive",
        "hidden": true,
        "pages": ["archive/old-content"]
      }
    ]
  }
}

​
Hiding API documentation sections

Control visibility of API playground and documentation elements.

​
Hide the API playground

Hide the interactive API playground globally by setting display to none in your docs.json: 
{
  "api": {
    "playground": {
      "display": "none"
    }
  }
}
Options for display:
  • interactive - Show the full interactive playground (default)
  • simple - Show a copyable endpoint without the playground
  • none - Hide the playground entirely

​
Hide playground on specific pages

Override the global playground setting for individual API pages using frontmatter: 
---
title: "Create user"
api: "POST /users"
playground: "none"
---

​
Hide playground for unauthenticated users

Show the playground only to authenticated users: 
---
title: "Create user"
api: "POST /users"
playground: "auth"
---
When playground is set to auth:
  • Authenticated users see the interactive playground
  • Unauthenticated users see no playground
Combine with the groups property to restrict access to specific user groups: 
---
title: "Admin endpoint"
api: "POST /admin/users"
playground: "auth"
groups: ["admin", "developer"]
public: true
---

​
Hide specific API sections

Use custom CSS to hide specific sections of API documentation. Create a style.css file in your repository: 
/* Hide the Authorization section */
.api-section[data-section="authorization"] {
  display: none;
}

/* Hide the Authentication section */
.api-section[data-section="authentication"] {
  display: none;
}
API section selectors may vary. Use your browser’s inspect element tool to identify the correct selectors for the sections you want to hide.

​
Hiding the sidebar

Control sidebar visibility on specific pages using the mode frontmatter property.

​
Hide sidebar on a single page

Use the center mode to hide both the sidebar and table of contents: 
---
title: "Landing page"
mode: "center"
---
Use the custom mode for a minimal layout with only the top navbar: 
---
title: "Custom landing page"
mode: "custom"
---
Available layout modes:
  • default - Standard layout with sidebar and table of contents
  • wide - Hides table of contents for wider content
  • center - Hides sidebar and table of contents
  • custom - Minimal layout with only the navbar

​
Hide sidebar globally with CSS

Create a style.css file to hide the sidebar across all pages: 
#sidebar {
  display: none !important;
}

/* Adjust content area to fill the space */
#content-area {
  margin-left: 0 !important;
}
Hiding the sidebar globally can make navigation difficult. Consider using page-specific layout modes instead.

​
Hiding the Mintlify badge

The “Powered by Mintlify” badge appears in the footer on free plans. This badge is automatically removed on paid plans. To remove the badge, upgrade to a paid plan through your Mintlify dashboard.
Attempting to hide the Mintlify badge with custom CSS on free plans violates the terms of service.

​
Hiding other UI components

Use custom CSS to hide additional UI elements. Create a style.css file in your repository and target specific elements using their identifiers or selectors.

​
Common elements to hide

/* Hide the search bar */
#search-bar-entry {
  display: none;
}

/* Hide the feedback toolbar */
#feedback-toolbar {
  display: none;
}

/* Hide the table of contents */
#table-of-contents {
  display: none;
}

/* Hide pagination */
#pagination {
  display: none;
}

/* Hide the page context menu */
#page-context-menu {
  display: none;
}

​
Available identifiers

Mintlify provides identifiers for common UI elements. Use inspect element in your browser to find the correct identifier for the element you want to hide.
  • Banner: banner
  • Footer: footer
  • Header: header
  • Navbar: navbar
  • Sidebar: sidebar
  • SidebarContent: sidebar-content
  • TableOfContents: table-of-contents
  • Pagination: pagination
  • SearchBarEntry: search-bar-entry
  • FeedbackToolbar: feedback-toolbar
  • PageContextMenu: page-context-menu
See Custom scripts for a complete list of identifiers and selectors.

​
Hide elements on specific pages

Use page-specific CSS by adding a class to your page and targeting it in your stylesheet: 
---
title: "Special page"
---

<div className="hide-toc-page">
  <!-- Your content -->
</div>

/* Only hide TOC on pages with this class */
.hide-toc-page ~ #table-of-contents {
  display: none;
}

​
Best practices

Always prefer built-in properties like hidden, mode, and playground over custom CSS. Built-in properties are more maintainable and less likely to break with platform updates.
If you use custom CSS to hide elements, test your documentation across different themes to ensure the selectors work consistently.
Keep a record of which elements you’ve hidden and why. This helps when troubleshooting or updating your documentation.
Hiding navigation elements can make it harder for users to discover content. Ensure users have alternative ways to find hidden pages if needed.
When targeting elements with custom CSS, use your browser’s inspect element tool to find the correct identifiers and selectors.
Element identifiers and selectors may change as the platform evolves. Use custom styling with caution and test your documentation after platform updates.