SidebarNavigationItem: Is LinkExternalIcon automatically provided?

[bvsillorequez]

When applying SidebarNavigationItem, if the path that is provided is an external link, is 1) the LinkExternalIcon automatically provided 2) Will the external link automatically appear without needing to add an icon prop?

Yesterday, when looking at a SPA page (oneadmin), the external link icon wasn't on the navigation item for external links but when directed to an ALB/Monkey page the external link icon was present

Today, when going to both a SPA or ALB/Monkey page, there was no external link icon present. This could possibly be a bug.

Do we need to provide an icon if we want to display an icon?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

The SidebarNavigationItem component does not automatically provide the LinkExternalIcon for external links. If you want to display an icon, you need to set the icon prop to any valid Paste Icon.

Here's an example of how you can do this:

import {SidebarNavigationItem} from '@twilio-paste/sidebar-navigation';
import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon';

<SidebarNavigationItem href="https://external-link.com" icon={<LinkExternalIcon decorative />}>
  External Link
</SidebarNavigationItem>

In this example, the LinkExternalIcon is used as the icon for the SidebarNavigationItem. The decorative prop is set to true because the icon does not provide additional information to the user, it's just for decoration.

Please note that if an external URL is used for the href, the target and rel will automatically be updated to target="_blank" and rel="noreferrer noopener" for security purposes. However, this does not include automatically adding an external link icon.

---

Here are some similar discussions:

• Button with as="a" attribute not showing the externalLink Icon (updated: 2021-08-12T21:59:55Z, similarity score: 0.85)
• No prop to change Nav Item icon to ChevronDisclosureIcon - Answer (updated: 2020-11-03T23:55:07Z, similarity score: 0.84)
• Are internal links that open in a new tab considered external anchors? - Answer (updated: 2022-08-17T21:29:11Z, similarity score: 0.84)

[SiTaggart]

Pretty bang on. I don't know how you know that we automatically make external links safe, but we do, well done PasteBot.

I will add that although adding the LinkExternalIcon via the icon prop is perfectly valid, we usually apply it after the text as a convention. Adding the icon automatically was floated internally as a potential known gap that we might add in the future. I'm pretty sure it made it to the backlog, but it's not something we'll tackling in the short term.

Hope that helps