Skip to content

🌿 Fern Scribe: Add docs for collapsed:true for docs.yml... #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

🌿 Fern Scribe: Add docs for collapsed:true for docs.yml... #318

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions fern/products/docs/pages/navigation/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -237,10 +243,9 @@ tabs:
Here's an example of what the Tabs implementation looks like:

<Frame>
![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)
</Frame>

## 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).