How to open SharePoint Online Modern SPFX links in new tab

If you are working with Modern pages or SPFX web part in SharePoint Online, you may come across a problem when wanting to open links in a new browser tab, however, they open in the same tab 😕.

How to stop SharePoint Online links from opening in the same window? How to open SharePoint Online links in a new tab window? 🙄 If you are looking for answers to these questions, let's work together and find a solution!

⚡️ Why SharePoint Online links do not open in new tab ?

By design, SharePoint links open in the same tab in the modern pages (this could be a link to any site, document, page, or anything else within your SharePoint tenant). On the contrary, external links do open in a new tab, say a link to Code2Care https://code2care.org .

The behavior is the same for,

• Quick Launch navigation links.
• Modern web parts like Quick Links, Images, Hero, etc.
• Classic web parts like Content Editor, Script Editor.
• SPFX web parts.

Read comment from the SharePoint Product team here - SharePoint User Voice

⚡️ Let us try the HTML way --> target="_blank"

Use anchor tag with attribute target="_blank" which would open the hyperlink in a new window 😎.

<a href="https://c2c.sharepoint.com/sites/SPDev/home.aspx" target="_blank">Code2Care SPO Home Page</a>

Oops, what happened 😲 ? Why did that not work ? - The anchor tag ignores the target="_blank" attribute for internal links but works for external links. You may specify to open links in a new tab, but that will not work.

⚡️ Why does the target="_blank" not work?

SharePoint Online uses an inbuilt Page Router which is a mechanism used to render pages in SharePoint. It decides how the SharePoint page should be rendered and ignores the target attribute. Same is the case with SharePoint Framework (spfx) web parts.

✔️ The hidden gem - "data-interception" attribute

Use "data-interception" attribute that can be added to the HTML anchor tag to bypass the Page Router logic.
In order to open link in a new tab, add the attribute data-interception="off" to your anchor tag. This will bypass the default behavior.

<a href="https://c2c.sharepoint.com/home.aspx" target="_blank" data-interception="off">Code2Care SPO Home Page</a>

Try now, your SharePoint hyperlinks from Modern pages will open in new tab 😊, respecting the target="_blank" attribute.

This trick works with Scripts (Content Editor, Modern Script Editor) as well, remember that target="_blank" will not work unless you include data-interception="off". But avoid injecting script and manipulating the SharePoint page DOM, go for SPFX web part instead.

⭐ Office Fabric - open SharePoint link in new tab

<Link href="https://c2c.sharepoint.com/sites/SPDev/fabric.aspx" target="_blank" data-interception="off">Office Fabric Link</Link>

⭐ SPFX - open SharePoint link in new tab

<a href="https://c2c.sharepoint.com/sites/SPDev/spfx.aspx" target="_blank" data-interception="off">SPFX link</a>

⭐ Modern Script Editor - open SharePoint link in new tab

<a href="https://c2c.sharepoint.com/sites/SPDev/mypage.aspx" target="_blank" data-interception="off">Hyperlink</a>

Have Questions? Post them here!