Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions fern/products/docs/pages/changelog/2025-11-14.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
## Link target property

<Markdown src="/snippets/link-target.mdx" />

[Learn more](/learn/docs/configuration/navigation) about links and other navigational elements.
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,6 @@ Fern has a built-in component library you can use in Markdown. [Explore the comp

## Links in Markdown

### Link target
When clicked, links to relative URLs open in the same tab, whereas links to absolute URLs open in a new browser tab.

### Link format
Use a `/` character to begin a relative URL to another page on your docs site. This routes to the `url` defined in your `docs.yml` file, such as `example-docs.buildwithfern.com`. For example, if you want to link to `https://example-docs.buildwithfern.com/overview/introduction`, you can write the link in Markdown as follows:

Expand All @@ -66,3 +63,9 @@ Use a `/` character to begin a relative URL to another page on your docs site. T
Read the [Introduction](/learn/overview/introduction).
```
</CodeBlock>

### Link target

<Markdown src="/snippets/link-target.mdx" />

[Learn more](/learn/docs/configuration/navigation) about links and other navigational elements.
10 changes: 10 additions & 0 deletions fern/products/docs/pages/customization/site-level-settings.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ navbar-links:
- type: minimal
text: Contact support
href: https://example.com/support
target: _blank
icon: fa-solid fa-headset
- type: filled
text: Login
Expand All @@ -253,6 +254,7 @@ navbar-links:
icon: fa-regular fa-file-lines
- text: API Reference
href: https://example.com/api
target: _blank
icon: fa-regular fa-code
- text: Tutorials
href: https://example.com/tutorials
Expand Down Expand Up @@ -293,6 +295,10 @@ navbar-links:
By default, the `rightIcon` for a `filled` button is set to `arrow-right`.
</ParamField>

<ParamField path="target" type="string" required={false} toc={true} default="_self">
Specifies where to open the linked URL. For typical documentation sites, links can open in the same tab (`_self`) or new tab (`_blank`). For documentation embedded in a dashboard or iframe, links can open in the parent frame (`_parent`) or topmost frame (`_top`).
</ParamField>

<ParamField path="links" type="list of objects" required={false} toc={true}>
Items to display in the dropdown menu when `type` is set to `dropdown`.
</ParamField>
Expand All @@ -317,6 +323,10 @@ navbar-links:
When `true`, the link will have fully rounded borders.
</ParamField>

<ParamField path="links.target" type="string" required={false} toc={true} default="_self">
Specifies where to open the linked URL.
</ParamField>

## Footer links configuration

Add clickable social media and community links to your documentation site footer to improve discoverability and engagement.
Expand Down
4 changes: 4 additions & 0 deletions fern/products/docs/pages/navigation/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,10 @@ navigation:
<img src="./external-link.png" alt="An external link within navigation" />
</Frame>

### Link target

<Markdown src="/snippets/link-target.mdx" />

## Tabs

You can add tabs to group sections of content together. Tabs can contain different layouts and navigation structures, and you can use tab variants to show different content variations within a single tab. For more information, see [Tabs and tab variants](/learn/docs/configuration/tabs).
Expand Down
3 changes: 2 additions & 1 deletion fern/products/docs/pages/navigation/products.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ products:
href: https://dashboard.example.com # External product
icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>" # Inline SVG
subtitle: Product C subtitle
target: _blank # Link opens in a new tab
```
</CodeBlock>

Expand Down Expand Up @@ -345,4 +346,4 @@ The dropdown menus for product and version selectors can be customized using the
<img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
</Frame>
</Tab>
</Tabs>
</Tabs>
1 change: 1 addition & 0 deletions fern/products/docs/pages/navigation/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ tabs:
display-name: GitHub
icon: brands github # Font Awesome icon
href: https://github.com/fern-api/fern
target: _blank # Link opens in a new tab

navigation:
- tab: api
Expand Down
12 changes: 12 additions & 0 deletions fern/snippets/link-target.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
Control where links open with the `target` property. Available for product, tab, navbar, and page links. For typical documentation sites, links can open in the same tab (`_self`) or new tab (`_blank`). For documentation embedded in a dashboard or iframe, links can open in the parent frame (`_parent`) or topmost frame (`_top`).

```yaml title="docs.yml" {8}
navigation:
- section: Home
contents:
- page: Introduction
path: ./intro.mdx
- link: Our YouTube channel
href: https://www.youtube.com/
target: _blank
```
Loading