[✅ Solution] How to add button/link inside tab menu

Community resources Webflow Tips
1

Happy Friday! :tada:

I recently came across a problem where I needed to replace a Webflow tab link with a custom link/button, but Webflow doesn’t allow links/buttons to be placed inside of tab links. The recommended solution is to rebuild the entire tabs UI using custom interactions, but that would have been a total pain.

After some tinkering in ChatGPT, I created a simple solution that involves replacing the original tab link with a custom link/button using JavaScript.

Here’s the tutorial:

And here’s the scripts:


<!-- 💙 MEMBERSCRIPT #92 v0.1 💙 TURN ANYTHING INTO A LINK -->
<script>
document.addEventListener('click', function(event) {
    let target = event.target;

    // Traverse up the DOM tree to find an element with the ms-code-navigate attribute
    while (target && !target.getAttribute('ms-code-navigate')) {
        target = target.parentElement;
    }

    // If we found an element with the ms-code-navigate attribute
    if (target) {
        const navigateUrl = target.getAttribute('ms-code-navigate');

        if (navigateUrl) {
            event.preventDefault();
            // Always open in a new tab
            window.open(navigateUrl, '_blank');
        }
    }
});
</script>

You can find the most up-to-date version of the script here. #92 - Change Page on Click | Webflow Powerups

And here’s a cloneble project with the script installed if you want to demo or clone it.
https://webflow.com/made-in-webflow/website/add-link-to-tab-menu

1 Like
2

This is great thank you! What do I need to change for it to not open in a new tab?

1 Like
3

I asked good ol’ ChatGPT. To open in the same tab instead of a new one, you need to modify the window.open function in the script. Currently, it’s set to open links in a new tab (_blank ). Change '_blank' to '_self' to open links in the same tab.

4

Worked a charm! Thanks so much.

1 Like
5

Hey @DuncanHamra!!
I’m working on a tab solution for a new project - and I’ve been following some of your amazing tutorials (both the Activate tab on hover instead of click and now this Add link inside tab solution), and you’re an absolute legend for providing these quick tutorials!

My current challenge right now is that I’m trying to create a CMS solution using these techniques – and it’s now really working out for me.

To summarize the situation and issue I’m facing:

  1. CMS content in tabs using Finsweet solution (working)
  2. Tab activates on hover and shows the content (using your great solution)
  3. Now I want to be able to click the button/name to open the corresponding CMS page in the same tab.

Perhaps there’s a solution that can “combine” your two solutions…?

See here on the Talent Hover Test page below:
[Read-Only]

You’re a trooper for helping out - many thanks!!! :pray:t3:

1 Like
6

So glad it’s been helpful!! I’m not too familiar with Finsweet’s CMS tab solution :thinking: So I’m really not sure how to combine them. Are you getting any errors?

The website looks great btw!

7

@DuncanHamra- I ended up finding a custom code solution with some help in a different thread here.

It’s now working great and as intended, using your great hover solution!

Many thanks for sharing that, and for providing so many other great resources for the community!

1 Like
8

Here comes the real challenge!
Hello @DuncanHamra, thank you so much for the priceless help you are providing
I used both MEMBERSCRIPT #79 and MEMBERSCRIPT #92 in the same tab, I am trying to show elements of the tab on hover, while also having the Tab as a link, do you think I can achieve that? (Also the first tab seems to glitch sometimes lol?)
here’s the read-only link Webflow - Villa Romana

9

Whoops! Sorry I’m just now seeing this. Were you able to find a solution?