Why Hero Web Part Link Opens in the Same Tab

When you click a link inside a SharePoint Hero web part, the target page often opens in the same browser tab. This behavior surprises many page editors who expect links to open in a new tab by default. The cause is the underlying link configuration in the Hero web part, which does not include a target attribute set to _blank. This article explains exactly why this happens, how SharePoint handles navigation by default, and what you can do to make Hero links open in a new tab.

How the Hero Web Part Handles Links

The Hero web part is a modern SharePoint page component designed to display up to five tiles with images, text, and a link. When you add a link to a Hero tile, you provide a URL through the link picker dialog. That dialog only accepts a URL — it does not offer any option to control the target window or tab. SharePoint applies the default link behavior for the <a> element, which is target="_self". This means the linked page loads in the same browser tab, replacing the current page. The web part does not read any query string parameters or metadata to change this behavior. This is consistent across all standard SharePoint modern web parts, including the Quick links web part and the Button web part.

The Technical Reason

The Hero web part renders each tile as an anchor tag (<a>) with an href attribute pointing to the URL you entered. The HTML specification states that if no target attribute is present, the browser defaults to _self. SharePoint does not inject a target="_blank" attribute because the web part developer chose not to include that option in the property pane. Microsoft designed the Hero web part for in-page navigation within the same site collection, assuming users would use the browser back button or site navigation to return. Adding a new tab option would require additional UI elements and increase complexity for a component meant to be simple and visual.

Steps to Make a Hero Web Part Link Open in a New Tab

Because the standard Hero web part does not support new tab behavior, you must use one of these alternative methods. Each method has trade-offs in maintenance, security, and user experience.

1. Use a custom SharePoint Framework extension
   Create a SharePoint Framework (SPFx) Application Customizer that runs on all modern pages. In the customizer code, use JavaScript to find all Hero web part links and add target="_blank" to each anchor tag. This requires Node.js, a code editor, and basic SPFx development skills. Deploy the solution to your app catalog and add the customizer to your site. This method gives you full control but requires developer resources.
2. Replace the Hero web part with a Quick links web part
   The Quick links web part includes a property called “Open links in new tab” in its settings panel. Edit your page, remove the Hero web part, and add a Quick links web part. In the web part property pane, expand the “Layout” section and check the box labeled “Open links in new tab.” Then add your tiles manually. This method is quick and requires no code. The trade-off is that the Quick links web part does not support the large hero image format.
3. Add a Script Editor web part with custom JavaScript
   Insert a Script Editor web part (available in the modern page toolbox) below the Hero web part. In the script editor, write a small script that runs after the page loads, selects all Hero tile links, and sets their target attribute to _blank. Example code: <script>document.querySelectorAll('.heroTile a').forEach(el => el.target = '_blank');</script>. This method works immediately but may break if Microsoft updates the Hero web part’s CSS class names.
4. Use a SharePoint Framework web part with new tab support
   Build a custom Hero web part using SPFx that includes a toggle in the property pane for new tab behavior. This requires the same SPFx development skills as the first method but gives you a reusable component. You can store the new tab preference in a web part property and render the links accordingly.

Common Misconceptions and Workarounds

Can I add target=”_blank” in the link URL itself?

No. Adding target="_blank" inside the URL field, such as https://example.com" target="_blank, does not work. The Hero web part treats the entire string as a URL and attempts to navigate to it, resulting in a broken link. The target attribute is an HTML attribute on the anchor tag, not part of the URL.

Does holding Ctrl or Shift while clicking change the behavior?

Yes. Users can press and hold the Ctrl key (Windows) or Command key (Mac) while clicking the link to force it open in a new tab. Similarly, holding Shift opens the link in a new window. This is a browser-level override and works regardless of the target attribute. However, you cannot rely on all users to know or remember this shortcut.

Will Microsoft add a new tab option in a future update?

Microsoft has not announced plans to add a new tab option to the Hero web part. The web part has remained unchanged for several years. The recommended workaround from Microsoft documentation is to use the Quick links web part when you need new tab behavior. If you need the visual impact of the Hero web part, you must use one of the custom methods described above.

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

Item	Hero Web Part	Quick Links Web Part
Default link target	Same tab (_self)	Same tab (_self) unless configured
New tab option in settings	Not available	Yes, in Layout > Open links in new tab
Visual layout	Large hero image with overlays	Compact grid or list
Maximum number of tiles	5	Unlimited
Custom code required for new tab	Yes	No

You can now choose the best approach for your site based on the comparison above. If you prefer a no-code solution, replace the Hero web part with the Quick links web part and enable the Open links in new tab option. If you need the Hero layout, use the Script Editor web part with JavaScript as a fast workaround. For a permanent fix across all sites, invest in a custom SPFx extension that adds new tab support to every Hero web part on your tenant.