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,304 @@
+---
+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", "visibility control", "custom CSS"]
+---
+
+Control which UI elements appear in your documentation. Hide navigation elements, API sections, sidebar components, and other interface elements to create a cleaner, more focused user experience.
+
+## Hide navigation elements
+
+### Hide pages
+
+To hide a page from navigation while keeping it accessible via URL, set `hidden: true` in the page's frontmatter or remove it from your `docs.json` navigation.
+
+```yaml
+---
+title: "My hidden page"
+hidden: true
+---
+```
+
+<Note>
+  Hidden pages are automatically excluded from search engines, sitemaps, and AI context. See [Hidden pages](/organize/hidden-pages) for more information.
+</Note>
+
+### Hide groups
+
+To hide an entire group of pages, set the `hidden` property to `true` for the group in your `docs.json` file:
+
+```json
+"groups": [
+  {
+    "group": "Getting started",
+    "hidden": true,
+    "pages": [
+      "index",
+      "quickstart"
+    ]
+  }
+]
+```
+
+### Hide tabs
+
+To hide a tab from the navigation bar, add the `hidden` property to the tab in your `docs.json` file:
+
+```json
+"tabs": [
+  {
+    "tab": "Home",
+    "hidden": true,
+    "pages": [
+      "index",
+      "quickstart"
+    ]
+  }
+]
+```
+
+### Hide anchors, dropdowns, and products
+
+The `hidden` property works consistently across all navigation elements. Add `hidden: true` to any anchor, dropdown, or product to hide it from navigation:
+
+```json
+"anchors": [
+  {
+    "anchor": "Documentation",
+    "hidden": true,
+    "pages": ["quickstart", "development"]
+  }
+]
+```
+
+## Control sidebar visibility on specific pages
+
+Use page layout modes to control sidebar visibility on individual pages.
+
+### Hide sidebar and table of contents
+
+Use `center` mode to remove both the sidebar and table of contents:
+
+```yaml
+---
+title: "Centered page"
+mode: "center"
+---
+```
+
+<Note>
+  Center mode is supported by Mint and Linden themes.
+</Note>
+
+### Hide table of contents only
+
+Use `wide` mode to hide the table of contents while keeping the sidebar:
+
+```yaml
+---
+title: "Wide page"
+mode: "wide"
+---
+```
+
+### Hide all navigation elements
+
+Use `custom` mode to create a minimal layout with only the top navbar:
+
+```yaml
+---
+title: "Custom page"
+mode: "custom"
+---
+```
+
+### Keep sidebar, hide table of contents
+
+Use `frame` mode to preserve sidebar navigation while removing the table of contents:
+
+```yaml
+---
+title: "Frame page"
+mode: "frame"
+---
+```
+
+<Note>
+  Frame mode is supported by Aspen and Almond themes only.
+</Note>
+
+See [Page mode](/organize/pages#page-mode) for more information about layout options.
+
+## Hide API documentation sections
+
+### Hide specific endpoints
+
+For OpenAPI-generated documentation, use the `x-hidden` extension to hide specific endpoints from navigation while keeping them accessible via direct URL:
+
+```json
+"paths": {
+  "/internal_endpoint": {
+    "get": {
+      "x-hidden": true,
+      "description": "Internal endpoint not shown in navigation"
+    }
+  }
+}
+```
+
+### Exclude endpoints completely
+
+Use the `x-excluded` extension to completely exclude an endpoint from your documentation:
+
+```json
+"paths": {
+  "/secret_endpoint": {
+    "get": {
+      "x-excluded": true,
+      "description": "This endpoint will not be documented"
+    }
+  }
+}
+```
+
+See [Manage page visibility](/api-playground/managing-page-visibility) for more information about controlling API endpoint visibility.
+
+## Hide UI components with custom CSS
+
+Use custom CSS to hide specific UI components. Create a CSS file in your documentation repository to apply custom styles globally.
+
+### Common UI elements to hide
+
+Mintlify provides identifiers and selectors for common UI elements. Use these to target specific components:
+
+```css style.css
+/* Hide the footer */
+#footer {
+  display: none;
+}
+
+/* Hide the sidebar */
+#sidebar {
+  display: none;
+}
+
+/* Hide the table of contents */
+#table-of-contents {
+  display: none;
+}
+
+/* Hide the search bar */
+#search-input {
+  display: none;
+}
+
+/* Hide the feedback form */
+#feedback-form {
+  display: none;
+}
+
+/* Hide pagination */
+#pagination {
+  display: none;
+}
+```
+
+### Hide API sections
+
+Target specific API documentation sections using CSS selectors:
+
+```css style.css
+/* Hide API section headings */
+.api-section-heading {
+  display: none;
+}
+
+/* Hide request examples */
+#request-example {
+  display: none;
+}
+
+/* Hide response examples */
+#response-example {
+  display: none;
+}
+
+/* Hide the API playground input */
+#api-playground-input {
+  display: none;
+}
+```
+
+### Available identifiers and selectors
+
+<AccordionGroup>
+  <Accordion title="Common identifiers">
+    - APIPlaygroundInput: `api-playground-input`
+    - Banner: `banner`
+    - BodyContent: `body-content`
+    - ContentArea: `content-area`
+    - ContentContainer: `content-container`
+    - FeedbackForm: `feedback-form`
+    - Footer: `footer`
+    - Header: `header`
+    - Navbar: `navbar`
+    - Pagination: `pagination`
+    - RequestExample: `request-example`
+    - ResponseExample: `response-example`
+    - SearchInput: `search-input`
+    - Sidebar: `sidebar`
+    - SidebarContent: `sidebar-content`
+    - TableOfContents: `table-of-contents`
+  </Accordion>
+  <Accordion title="Common selectors">
+    - APISection: `api-section`
+    - APISectionHeading: `api-section-heading`
+    - APISectionHeadingSubtitle: `api-section-heading-subtitle`
+    - APISectionHeadingTitle: `api-section-heading-title`
+    - Anchor: `nav-anchor`
+    - Anchors: `nav-anchors`
+    - DropdownTrigger: `nav-dropdown-trigger`
+    - DropdownContent: `nav-dropdown-content`
+    - FeedbackToolbar: `feedback-toolbar`
+    - Logo: `nav-logo`
+    - NavBarLink: `navbar-link`
+    - SidebarGroup: `sidebar-group`
+    - SidebarGroupHeader: `sidebar-group-header`
+    - TabsBar: `nav-tabs`
+    - TabsBarItem: `nav-tabs-item`
+  </Accordion>
+</AccordionGroup>
+
+<Tip>
+  Use your browser's inspect element tool to find references to elements you want to customize.
+</Tip>
+
+See [Custom scripts](/customize/custom-scripts) for the complete list of identifiers and selectors.
+
+<Warning>
+  References and styling of common elements may change as the platform evolves. Use custom styling with caution.
+</Warning>
+
+## Hide the Mintlify badge
+
+The "Powered by Mintlify" badge is removed automatically on paid plans. If you're on a paid plan and still see the badge, contact [support@mintlify.com](mailto:support@mintlify.com).
+
+For users on free plans, the badge is required and cannot be hidden.
+
+## Best practices
+
+When hiding UI elements, consider these best practices:
+
+1. **Maintain accessibility**: Ensure users can still navigate your documentation effectively after hiding elements.
+2. **Test thoroughly**: Verify that hiding elements doesn't break functionality or create layout issues.
+3. **Use built-in options first**: Prefer using `hidden` properties and page modes over custom CSS when possible.
+4. **Document your changes**: Keep track of which elements you've hidden and why.
+5. **Consider user experience**: Only hide elements that genuinely improve the user experience.
+
+## Related resources
+
+- [Hidden pages](/organize/hidden-pages) - Hide pages from navigation
+- [Navigation](/organize/navigation) - Configure navigation structure
+- [Page mode](/organize/pages#page-mode) - Control page layouts
+- [Custom scripts](/customize/custom-scripts) - Add custom CSS and JavaScript
+- [Manage page visibility](/api-playground/managing-page-visibility) - Control API endpoint visibility