#How to set a link to open in a new tab?

3 messages · Page 1 of 1 (latest)

gray shard
#

I want the link in my hero section to open in a new tab. After doing some research I tried adding a target and rel attribute, but this didn't change anything and the link still opens in the same tab.

---
title: Huly Documentation
description: Get started with Huly's all-in-one project management platform.
template: splash
hero:
  tagline: Open Source All-in-One Project Management Platform
  image:
    file: ../../assets/huly-logo-bw.svg
  actions:
    - text: Get Started
      link: /getting-started/introduction/
      icon: right-arrow
      variant: primary
    - text: Visit us at Huly.io
      link: https://huly.io/
      icon: external
      target: _blank
      rel: noopener noreferrer
---
meager roseBOT
#

Hi @gray shard. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, you can add custom HTML attributes to your links using the attrs property. This allows you to add attributes such as target="_blank" and rel="noopener noreferrer" to your links, which will make them open in a new tab.

In your case, you can modify your frontmatter like this:

---
title: Huly Documentation
description: Get started with Huly's all-in-one project management platform.
template: splash
hero:
  tagline: Open Source All-in-One Project Management Platform
  image:
    file: ../../assets/huly-logo-bw.svg
  actions:
    - text: Get Started
      link: /getting-started/introduction/
      icon: right-arrow
      variant: primary
    - text: Visit us at Huly.io
      link: <https://huly.io/>
      icon: external
      attrs:
        target: _blank
        rel: noopener noreferrer
---

This will add the target="_blank" and rel="noopener noreferrer" attributes to your "Visit us at Huly.io" link, causing it to open in a new tab when clicked.

For more information, you can refer to the Astro documentation on custom HTML attributes (https://starlight.astro.build/guides/sidebar#custom-html-attributes) and the Astro documentation on the attrs frontmatter field (https://starlight.astro.build/reference/frontmatter#attrs).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: