CMS Tab buttons as clickable links

Hello Webflow community!

I’m working on a project that involves showcasing a company’s photography talent roster using the CMS in a Tab format on Webflow. I’ve run into a bit of a challenge and would really appreciate any guidance or suggestions you might have.

The Setup:

However, I’m stuck at the point where I need to make the talent’s name not just a hover but also a clickable link that leads to their individual CMS page.

Is there a way to turn these tabs into clickable links?
Or is there a simpler/better way to display the talent’s bio+video on hover, without involving Tabs etc?

If anyone has tackled a similar issue or knows how to work around this limitation in Webflow, your insights would be invaluable!!

Thank you all in advance!


  • Here is the Read-Only: LINK
  • And this page shows it live: LINK

Hey Joa,

I think that you can use some custom code to keep your current setup but allow users to reach post pages upon clicking on the talent name.

If you add a data-slug attribute to fs-tabs_dynamic-tab-link and connect it with the slug, the same data attribute should be cloned on the tab link element. Then, you can follow the comments in the code to use data-slug to redirect users on mouse click.

If, for some reason, the attribute is not cloned to a tabs link, I have used the talent name and converted it to a slug. At the moment, that option has been used and it seems to work. However, this solution is good only as long as you don’t change the slug to be different than the name or until you don’t add the same name twice in the CMS. So, I would suggest going with the first solution.

setTimeout has been added because it will take some time for the Finsweet script to update HTML. If this doesn’t work for you, you can try using Finsweet push

window.addEventListener('load', function(){
let tabLink = document.querySelectorAll('.fs-tabs_link')
tabLink.forEach(link =>{

    // in case you would like to go with heading solution
    let slug = link.querySelector('h5').textContent
    let cleanedSlug = slug.replace(/[^-\w\s]/g, '').replace(/\s+/g, ' ').trim();
    let finalSlug = cleanedSlug.replace(/\s+/g, '-').toLowerCase();

    // in case you add data slug attribute to fs-tabs_dynamic-tab-link 
// var dataSlug = link.querySelector('.fs-tabs_dynamic-tab-link').getAttribute('data-slug') 
    link.addEventListener('mousedown', function(e){
        window.location.href = '/talent/' + finalSlug   // use dataSlug instead of finalSlug if you go with attribute solution
window.fsAttributes = window.fsAttributes || [];
  (listInstances) => {

////Copy code without window load and set timeout function here 

1 Like

Hey @NemanjaVasilevski !

You are an absolute wizard! Thank you so much for providing this custom code and great solution to my problem.

I did go with your dataSlug attribute solution, which indeed seems like the smartest path forward.

Once again, thank you tons for the help - you’re a lifesaver!