diff --git a/docs.json b/docs.json
index e78206de1..32a4b6dc8 100644
--- a/docs.json
+++ b/docs.json
@@ -39,6 +39,7 @@
"organize/navigation",
"organize/pages",
"organize/hidden-pages",
+ "organize/hiding-ui-elements",
"organize/mintignore"
]
},
diff --git a/organize/hiding-ui-elements.mdx b/organize/hiding-ui-elements.mdx
new file mode 100644
index 000000000..bb2fc626d
--- /dev/null
+++ b/organize/hiding-ui-elements.mdx
@@ -0,0 +1,338 @@
+---
+title: "Hiding UI elements"
+description: "Control visibility of navigation elements, API sections, and other UI components."
+keywords: ["hide navigation", "hide sidebar", "hide tabs", "hide API sections", "UI visibility", "custom CSS"]
+---
+
+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:
+
+```yaml
+---
+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](/organize/hidden-pages) for more details.
+
+### Hide groups
+
+Hide entire groups of pages by setting the `hidden` property in your `docs.json`:
+
+```json
+{
+ "navigation": {
+ "groups": [
+ {
+ "group": "Internal docs",
+ "hidden": true,
+ "pages": ["internal/page1", "internal/page2"]
+ }
+ ]
+ }
+}
+```
+
+### Hide tabs
+
+Hide tabs from the top navigation bar:
+
+```json
+{
+ "navigation": {
+ "tabs": [
+ {
+ "tab": "Beta features",
+ "hidden": true,
+ "pages": ["beta/feature1", "beta/feature2"]
+ }
+ ]
+ }
+}
+```
+
+### Hide anchors
+
+Hide anchors from the sidebar:
+
+```json
+{
+ "navigation": {
+ "anchors": [
+ {
+ "anchor": "Legacy docs",
+ "hidden": true,
+ "pages": ["legacy/overview"]
+ }
+ ]
+ }
+}
+```
+
+### Hide dropdowns
+
+Hide dropdown menus:
+
+```json
+{
+ "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`:
+
+```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:
+
+```yaml
+---
+title: "Create user"
+api: "POST /users"
+playground: "none"
+---
+```
+
+### Hide playground for unauthenticated users
+
+Show the playground only to authenticated users:
+
+```yaml
+---
+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:
+
+```yaml
+---
+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:
+
+```css
+/* 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:
+
+```yaml
+---
+title: "Landing page"
+mode: "center"
+---
+```
+
+Use the `custom` mode for a minimal layout with only the top navbar:
+
+```yaml
+---
+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:
+
+```css
+#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](https://dashboard.mintlify.com).
+
+
+ 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
+
+```css
+/* 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](/customize/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:
+
+```yaml
+---
+title: "Special page"
+---
+
+
+
+
+```
+
+```css
+/* 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.
+