Hero Web Part Link Opens in the Same Tab: Root Cause and Fix

When you add a link to the Hero web part on a SharePoint modern page, clicking that link usually opens the target in the same browser tab. This behavior frustrates site visitors who expect a new tab to open, especially when the link points to an external site or a document. The root cause is that the Hero web part does not expose a built-in setting to control the target attribute of its link. This article explains why the link opens in the same tab and provides two reliable methods to force the link to open in a new tab or window.

Why the Hero Web Part Link Opens in the Same Tab

The Hero web part is a modern SharePoint page component designed to display up to five tiles with an image, title, and description. Each tile can link to a page, document, or external URL. When you configure the link in the Hero web part properties panel, you select a destination URL but you cannot choose whether the link opens in the same tab or a new tab. The underlying HTML generated by the web part includes target="_self" by default. This is by design — the Hero web part does not expose a target attribute in its configuration interface.

The same limitation applies to other modern web parts like the Quick Links web part and the News web part. Microsoft has not added a “Open in new tab” checkbox to these web parts as of 2024. To change the behavior, you must use a custom script or a third-party solution that modifies the link’s target attribute after the page loads.

Two Methods to Make Hero Web Part Links Open in a New Tab

Method 1: Add a Script Editor Web Part with JavaScript

This method uses the classic Script Editor web part to inject JavaScript that runs after the page finishes loading. The script finds all anchor tags inside the Hero web part and sets their target attribute to _blank.

1. Enable custom scripts on the site collection
   Go to the SharePoint admin center, select Settings, then click Classic settings page. Under Custom Script, choose Allow users to run custom script on self-service created sites and Allow users to run custom script on personal sites. Click OK. Wait up to 24 hours for the change to take effect. Alternatively, use PowerShell: Set-SPOSite -Identity -DenyAddAndCustomizePages 0.
2. Edit the page and add a Script Editor web part
   On the page containing the Hero web part, click Edit in the top-right corner. Click the + icon to add a new web part. Search for Script Editor and select it. The Script Editor web part appears on the page.
3. Insert the JavaScript code
   Click inside the Script Editor web part and paste the following code:
   <script>
window.onload = function() {
var heroLinks = document.querySelectorAll('.heroWebPart a[href]');
for (var i = 0; i < heroLinks.length; i++) {
heroLinks[i].setAttribute('target', '_blank');
}
};
</script>
   If your Hero web part uses a different CSS class, inspect the page using browser developer tools to find the correct selector. For most modern SharePoint pages, .heroWebPart works.
4. Save and publish the page
   Click Page in the ribbon, then click Stop editing. Choose Publish to make the page visible to all visitors. Test a Hero web part link — it should now open in a new tab.

Method 2: Use a SharePoint Framework (SPFx) Extension

For site collections where custom scripts are not allowed or for a more maintainable solution, create an SPFx extension that applies the target change globally to all Hero web parts on all pages.

1. Set up the SPFx development environment
   Install Node.js, Yeoman, and the SharePoint Framework generator. Run yo @microsoft/sharepoint and choose Extension as the component type, then Application Customizer.
2. Write the extension code
   In the generated MyApplicationCustomizer.ts file, add the following code inside the onInit method:
   public onInit(): Promise<void> {
SPComponentLoader.loadCss('');
document.addEventListener('DOMContentLoaded', () => {
const heroLinks = document.querySelectorAll('.heroWebPart a[href]');
heroLinks.forEach(link => link.setAttribute('target', '_blank'));
});
return Promise.resolve();
}
3. Deploy the extension to the app catalog
   Package the solution using gulp bundle --ship and gulp package-solution --ship. Upload the .sppkg file to the tenant app catalog. Add the extension to the site collection where the Hero web part is used.
4. Verify the behavior
   Browse to any page that contains a Hero web part. Click a link — it should open in a new tab. The extension applies automatically to all existing and new pages without further editing.

Common Issues and Workarounds

Script Editor web part does not appear in the web part picker

The Script Editor web part is a classic web part. It may be hidden by default on modern pages. To make it visible, go to the page, click Edit, then click the + icon. In the web part picker, scroll to the bottom and click See all web parts. Search for Script Editor. If it still does not appear, custom scripts may not be enabled on the site collection. Follow Method 1 step 1 to enable custom scripts.

JavaScript does not run after page navigation

SharePoint modern pages use client-side navigation. The window.onload event may not fire when navigating between pages. To handle this, use the SP.Navigation.NavigationEvent or a mutation observer. A simpler workaround is to disable client-side navigation for the site. Go to the site settings, click Site collection features, and deactivate SharePoint Lists and Libraries client-side page rendering. This forces full page reloads.

Hero web part links still open in the same tab on mobile devices

The JavaScript approach works on desktop browsers but may not apply correctly on mobile browsers that use a different rendering engine. Test on iOS Safari and Android Chrome. If the links do not open in a new tab, consider using an SPFx extension with a more robust selector that targets mobile-specific CSS classes.

Hero Web Part vs Quick Links Web Part: Link Target Behavior

Item	Hero Web Part	Quick Links Web Part
Default link target	_self (same tab)	_self (same tab)
Built-in setting to change target	No	No
Number of tiles/links	Up to 5 tiles	Unlimited links
Custom script workaround	Requires Script Editor or SPFx extension	Requires Script Editor or SPFx extension
CSS class used in JavaScript	.heroWebPart	.quickLinksWebPart

The Hero web part and Quick Links web part share the same limitation: no native option to open links in a new tab. Both require the same custom script workaround. The main difference is the CSS class name used in the JavaScript selector.

You can now force Hero web part links to open in a new tab using either the Script Editor web part with a simple JavaScript snippet or a more robust SPFx extension. Start by enabling custom scripts on the site collection, then add the Script Editor web part with the code provided. For a site-wide solution that requires no page editing, deploy the SPFx extension. Test the behavior on desktop and mobile browsers, and adjust the JavaScript selector if your page uses a custom theme or CSS framework.