hashicorp · didoo · Jul 17, 2025 · Jul 16, 2025 · Jul 16, 2025 · Jul 16, 2025
@@ -364,8 +364,24 @@
         </span>
       </Hds::AppSideNav::List::Link>
     </SG.Item>
+    <SG.Item @label="Default link">
+      <Hds::AppSideNav::List::Link @icon="hashicorp" @text="HashiCorp Cloud Platform" @href="#" />
+    </SG.Item>
     <SG.Item @label="External link">
-      <Hds::AppSideNav::List::Link @icon="hashicorp" @text="HashiCorp Cloud Platform" @isHrefExternal={{true}} />
+      <Hds::AppSideNav::List::Link
+        @icon="hashicorp"
+        @text="HashiCorp Cloud Platform"
+        @isHrefExternal={{true}}
+        @href="#"
+      />
+    </SG.Item>
+    <SG.Item @label="Internal link">
+      <Hds::AppSideNav::List::Link
+        @icon="hashicorp"
+        @text="HashiCorp Cloud Platform"
+        @isHrefExternal={{false}}
+        @href="#"
+      />
     </SG.Item>
   </Shw::Grid>
 

@@ -834,8 +834,19 @@
         </span>
       </Hds::SideNav::List::Link>
     </SG.Item>
+    <SG.Item @label="Default link">
+      <Hds::SideNav::List::Link @icon="hashicorp" @text="HashiCorp Cloud Platform" @href="#" />
+    </SG.Item>
     <SG.Item @label="External link">
-      <Hds::SideNav::List::Link @icon="hashicorp" @text="HashiCorp Cloud Platform" @isHrefExternal={{true}} />
+      <Hds::SideNav::List::Link @icon="hashicorp" @text="HashiCorp Cloud Platform" @href="#" @isHrefExternal={{true}} />
+    </SG.Item>
+    <SG.Item @label="Internal link">
+      <Hds::SideNav::List::Link
+        @icon="hashicorp"
+        @text="HashiCorp Cloud Platform"
+        @href="#"
+        @isHrefExternal={{false}}
+      />
     </SG.Item>
   </Shw::Grid>
 

@@ -59,8 +59,8 @@ The `AppFooter::StatusLink` component, yielded as contextual component.
   <C.Property @name="href">
     Pass a custom href for the link. (URL parameter that’s passed down to the `<a>` element.)
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.
@@ -115,8 +115,8 @@ The `AppFooter::Link` component, yielded as contextual component.
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.

@@ -54,16 +54,16 @@ The `AppHeader::HomeLink` component uses the generic `Hds::Interactive` componen
     Used to display text inline with the logo. If `@isIconOnly` is set to `true`, this value will instead be passed to the `aria-label` of the `<a>` tag.
   </C.Property>
   <C.Property @name="isIconOnly" @type="boolean" @default="true">
-    Indicates if the Home Link will only contain a icon/logo. If set to `false`, the `@text` property will be rendered adjacent to the logo. 
+    Indicates if the Home Link will only contain a icon/logo. If set to `false`, the `@text` property will be rendered adjacent to the logo.
   </C.Property>
   <C.Property @name="color" @type="string">
     Used to specify an optional custom color provided as any valid CSS color. For more details on acceptable values, see the [Icon color argument](/components/icon?tab=code#fill). If unspecified, it will use the App Headers’s default white text color.
   </C.Property>
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    This controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.

@@ -133,8 +133,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    This controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external, in which case (for security reasons) we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.
@@ -190,8 +190,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    This controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. If set to `true`, displays a right aligned “external-link” icon.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons). If explicitly set to `true`, it displays also a right aligned “external-link” icon.
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.

@@ -26,8 +26,8 @@
   <C.Property @name="href">
     URL parameter that is passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Controls if the `<a>` link is external and so for security reasons we need to add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo/LinkToExternal>` component.

@@ -114,18 +114,21 @@ If you’re passing an `@href` or a `@route` argument to the component, this wil
 !!! Info
 
 The `Hds::Button` component uses the generic `Hds::Interactive` component. For more details about how this utility component works, please refer to [its documentation page](/utilities/interactive).
+
 !!!
 
 #### With @href
 
 If you pass an `@href` argument, an `<a>` link will be generated.
 
-`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument but can be overridden. If the `href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` and it will not add the `target` and `rel` attributes.
+By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `<a>` element. This is the most common case, as internal links are generally handled using a `@route` argument.
 
 ```handlebars
 <Hds::Button @text="Visit website" @icon="external-link" @iconPosition="trailing" @href="https://hashicorp.com" />
 ```
 
+If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes.
+
 #### With @route
 
 If you pass a `@route` argument, an `<a>` link will be generated using a `<LinkTo>` Ember component. All of the standard arguments for the `<LinkTo/LinkToExternal>` components are supported (eg. `models/model/query/current-when/replace`).

@@ -227,8 +227,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   <C.Property @name="href">
     URL passed to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Indicates whether or not the `<a>` link is external, in which case `target="_blank"` and `rel="noopener noreferrer"` attributes are added automatically.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters passed as arguments to the `<LinkTo/LinkToExternal>` component.
@@ -287,8 +287,8 @@ The `Dropdown::ListItem::Checkmark` component, yielded as contextual component.
   <C.Property @name="href">
     URL passed to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Indicates whether or not the `<a>` link is external, in which case `target="_blank"` and `rel="noopener noreferrer"` attributes are added automatically.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Indicates whether or not the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters passed as arguments to the `<LinkTo/LinkToExternal>` component.

@@ -219,7 +219,13 @@ To change this behavior, you can use the `@preserveContentInDom` argument so tha
 ### ListItem::Interactive
 
 `ListItem::Interactive` renders the correct element based on the passing of a `@route`, `@href`, or the addition of a click event (e.g.,
-`\{{on "click" this.myAction}}`). Internally, the component uses the [Hds::Interactive](/utilities/interactive) utility component.
+`\{{on "click" this.myAction}}`).
+
+!!! Info
+
+The `ListItem::Interactive` component uses the generic `Hds::Interactive` component. For more details about how this utility component works, please refer to [its documentation page](/utilities/interactive).
+
+!!!
 
 #### Rendering a button
 
@@ -245,13 +251,6 @@ You can pass an `@icon` argument to add a leading icon:
 
 #### Rendering a link with `@href`
 
-!!! Info
-
-**Internal Link?**
-
-When using the `@href` argument, you’re indicating an external link (instead of a route). So, a few relevant HTML attributes are added—`target="_blank"` and `rel="noopener noreferrer"`. However, if the `@href` really _does_ point to an internal link or uses a different protocol (e.g., `mailto` or `ftp`), pass `@isHrefExternal={{false}}` to the component and it will not add any extra HTML attributes.
-!!!
-
 If you pass an `@href` argument, a link (`<a>` element) will be generated:
 
 ```handlebars
@@ -261,8 +260,9 @@ If you pass an `@href` argument, a link (`<a>` element) will be generated:
   </Hds::Dropdown::ListItem::Interactive>
 </ul>
 ```
+By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `<a>` element. This is the most common case, as internal links are generally handled using a `@route` argument.
 
-To indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`.
+To visually indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`.
 
 ```handlebars
 <ul class="hds-dropdown__list">
@@ -272,6 +272,8 @@ To indicate that the link points to an external resource, you can use `@trailing
 </ul>
 ```
 
+If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes.
+
 #### Rendering a LinkTo (with `@route`)
 
 Pass a `@route` to render Ember `<LinkTo>`. If the route is external to your current engine, pass `@isRouteExternal={{true}}` to use `<LinkToExternal>` instead of `<LinkTo>`. For more details see the [Hds::Interactive component](/utilities/interactive/) documentation. All the standard arguments for the `<LinkTo/LinkToExternal>` components are supported (e.g., `models/model/query/current-when/replace`).
@@ -384,4 +386,4 @@ When using the “generic” ListItem, the product team is responsible for imple
     <Hds::Link::Standalone @text="Watch tutorial video" @icon="film" @href="/" />
   </D.Generic>
 </Hds::Dropdown>
-```
+```
@@ -13,8 +13,8 @@
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.

@@ -47,23 +47,23 @@ Inline Links use the generic `Hds::Interactive` component. Learn more about [how
 
 #### With `@href`
 
-To generate an `<a>` link, pass an `@href` argument with a URL as the value. 
+To generate an `<a>` link, pass an `@href` argument with a URL as the value.
 
-`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. 
+By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `<a>` element. This is the most common case, as internal links are generally handled using a `@route` argument.
 
 ```handlebars
 Lorem <Hds::Link::Inline @icon="external-link" @href="https://www.hashicorp.com">ipsum dolor</Hds::Link::Inline> sit amet consectetur adipiscing elit.
 ```
 
-If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{true}}` to the component and it will omit the `target` and `rel` attributes.
+If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes.
 
-#### With `@route` 
+#### With `@route`
 
 All the standard arguments for the `<LinkTo/LinkToExternal>` components are supported (e.g., `models/model/query/current-when/replace`).
 
 ##### For `<LinkTo>`
 
-To generate an `<a>` link using a `<LinkTo>` Ember component, pass a `@route` argument. 
+To generate an `<a>` link using a `<LinkTo>` Ember component, pass a `@route` argument.
 
 ```handlebars
 Lorem <Hds::Link::Inline @route="my.page.route" @model="my.page.model">ipsum dolor</Hds::Link::Inline> sit amet consectetur adipiscing elit.

@@ -17,8 +17,8 @@
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @default="false">
-    Controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default.
+  <C.Property @name="isHrefExternal" @type="boolean">
+    Controls if the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
   </C.Property>
   <C.Property @name="route/models/model/query/current-when/replace">
     Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.

@@ -31,7 +31,7 @@ There are two available colors for a Standalone Link: `primary` and `secondary`.
 
 ```handlebars
 <Hds::Link::Standalone @color="secondary" @icon="collections" @text="Read tutorial" @href="..." />
-```  
+```
 
 ### Size
 
@@ -53,26 +53,28 @@ Standalone Links use the generic `Hds::Interactive` component. Learn more about
 
 #### With `@href`
 
-To generate an `<a>` link, pass an `@href` argument with a URL as the value. 
+To generate an `<a>` link, pass an `@href` argument with a URL as the value.
 
-`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. 
+By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `<a>` element. This is the most common case, as internal links are generally handled using a `@route` argument.
 
 ```handlebars
 <Hds::Link::Standalone @icon="terraform" @text="Request a demo" @href="https://www.hashicorp.com/request-demo/terraform" />
 ```
 
+If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes.
+
 #### With `@route`
 
 All the standard arguments for the `<LinkTo/LinkToExternal>` components are supported (eg. `models/model/query/current-when/replace`).
 
 ##### For `<LinkTo>`
 
-To generate an `<a>` link using a `<LinkTo>` Ember component, pass a `@route` argument. 
+To generate an `<a>` link using a `<LinkTo>` Ember component, pass a `@route` argument.
 
 ```handlebars
 <Hds::Link::Standalone @icon="collections" @text="Go to the index page" @route="my.page.route" @model="my.page.model" />
 ```
 
 ##### For `<LinkToExternal>`
 
-If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `<LinkToExternal>` instead of `<LinkTo>`.
+If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `<LinkToExternal>` instead of `<LinkTo>`.