Add comprehensive guide on hiding UI elements

docs.json

@@ -39,6 +39,7 @@
                   "organize/navigation",
                   "organize/pages",
                   "organize/hidden-pages",
+                  "organize/hiding-ui-elements",
                   "organize/mintignore"
                 ]
               },

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;
+}
+```
+
+<Note>
+  API section selectors may vary. Use your browser's inspect element tool to identify the correct selectors for the sections you want to hide.
+</Note>
+
+## 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;
+}
+```
+
+<Warning>
+  Hiding the sidebar globally can make navigation difficult. Consider using page-specific layout modes instead.
+</Warning>
+
+## 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).
+
+<Note>
+  Attempting to hide the Mintlify badge with custom CSS on free plans violates the terms of service.
+</Note>
+
+## 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.
+
+<AccordionGroup>
+  <Accordion title="Common identifiers">
+    - 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`
+  </Accordion>
+</AccordionGroup>
+
+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"
+---
+
+<div className="hide-toc-page">
+  <!-- Your content -->
+</div>
+```
+
+```css
+/* Only hide TOC on pages with this class */
+.hide-toc-page ~ #table-of-contents {
+  display: none;
+}
+```
+
+## Best practices
+
+<AccordionGroup>
+  <Accordion title="Use built-in properties first">
+    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.
+  </Accordion>
+  <Accordion title="Test across themes">
+    If you use custom CSS to hide elements, test your documentation across different themes to ensure the selectors work consistently.
+  </Accordion>
+  <Accordion title="Document your customizations">
+    Keep a record of which elements you've hidden and why. This helps when troubleshooting or updating your documentation.
+  </Accordion>
+  <Accordion title="Consider user experience">
+    Hiding navigation elements can make it harder for users to discover content. Ensure users have alternative ways to find hidden pages if needed.
+  </Accordion>
+  <Accordion title="Use inspect element">
+    When targeting elements with custom CSS, use your browser's inspect element tool to find the correct identifiers and selectors.
+  </Accordion>
+</AccordionGroup>
+
+<Warning>
+  Element identifiers and selectors may change as the platform evolves. Use custom styling with caution and test your documentation after platform updates.
+</Warning>