diff --git a/fern/products/docs/pages/navigation/overview.mdx b/fern/products/docs/pages/navigation/overview.mdx index b01fedc4..c9ea2ad7 100644 --- a/fern/products/docs/pages/navigation/overview.mdx +++ b/fern/products/docs/pages/navigation/overview.mdx @@ -146,24 +146,30 @@ navigation: ## Collapsed sections -You can set sections to be collapsed by default when the page loads by adding `collapsed: true` to a section. -This helps keep the navigation tidy when you have many sections or want to highlight the most important sections by keeping others collapsed. +You can control whether sections are expanded or collapsed by default using the `collapsed` property. When set to `true`, the section will be collapsed when the page first loads. This is particularly useful for organizing large documentation sets or when you want to highlight certain sections by keeping others collapsed initially. -```yaml {7} Example config with collapsed section +```yaml Example navigation config with collapsed sections navigation: - section: Getting Started contents: - - page: Introduction - path: ./pages/intro.mdx + - page: Quick Start + path: ./pages/quickstart.mdx + - section: Core Concepts + collapsed: true + contents: + - page: Architecture + path: ./pages/concepts/architecture.mdx + - page: Authentication + path: ./pages/concepts/auth.mdx - section: Advanced Topics collapsed: true contents: - - page: Custom CSS - path: ./pages/advanced/css.mdx - - page: Analytics - path: ./pages/advanced/analytics.mdx + - page: Custom Integrations + path: ./pages/advanced/integrations.mdx ``` +The `collapsed` property can be applied to any section in your navigation, including nested sections. Users can still expand and collapse sections manually by clicking on them. + ## Sidebar icons For icons to appear next to sections and pages, add the `icon` key. The value should be a valid [Font Awesome icon](https://fontawesome.com/icons) name. Pro and Brand Icons from Font Awesome are supported. @@ -237,10 +243,9 @@ tabs: Here's an example of what the Tabs implementation looks like: - ![Screenshot showing two vertically stacked tabs labeled API Reference and Help - Center](https://fern-image-hosting.s3.amazonaws.com/fern/tabs.png) + ![Screenshot showing two vertically stacked tabs labeled API Reference and Help Center](https://fern-image-hosting.s3.amazonaws.com/fern/tabs.png) ## Versions -If you have multiple versions of your documentation, you can introduce a dropdown version selector by specifying the `versions`. For more information, check out our [documentation on versioning](/learn/docs/building-your-docs/versioning). +If you have multiple versions of your documentation, you can introduce a dropdown version selector by specifying the `versions`. For more information, check out our [documentation on versioning](/learn/docs/building-your-docs/versioning). \ No newline at end of file