[✅ 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. This video demo’s how I used the following code on Memberstack’s new pricing page.

Here’s the script:

// Set the desired URL
const url = "https://example.com";

// Create a new element with the new URL and your classes
const newLink = document.createElement("a");
newLink.setAttribute("class", "YOUR_CLASS w-inline-block w-clearfix w-tab-link custom-link-class");
newLink.setAttribute("href", url);
newLink.innerHTML = `
  <div class="custom-link-content">
    Link Text
  </div>`;

// Replace the original element with the new element
const originalLink = document.querySelector("#original-link-id");
originalLink.parentNode.replaceChild(newLink, originalLink);

// Add a click event listener to the new element
// Remove "_blank" to open in the same tab
newLink.addEventListener("click", function(event) {
  event.preventDefault();
  window.open(url, "_blank");
});

This script creates a new a element with the desired attributes and inner HTML, replaces the original tab link with the new element using parentNode.replaceChild(), and adds a click event listener to the new element that redirects to the desired URL in a new tab using window.open().

I hope this helps anyone else who is struggling with same issue I was. And I’m happy to help if you have any questions!

Cheers :wave: