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..81344d5a9 --- /dev/null +++ b/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 +--- +``` + + + Hidden pages are automatically excluded from search engines, sitemaps, and AI context. See [Hidden pages](/organize/hidden-pages) for more information. + + +### 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" +--- +``` + + + Center mode is supported by Mint and Linden themes. + + +### 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" +--- +``` + + + Frame mode is supported by Aspen and Almond themes only. + + +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 + + + + - 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` + + + - 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` + + + + + Use your browser's inspect element tool to find references to elements you want to customize. + + +See [Custom scripts](/customize/custom-scripts) for the complete list of identifiers and selectors. + + + References and styling of common elements may change as the platform evolves. Use custom styling with caution. + + +## 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