Placing a link inside a tablink, Webflow does not let that happen

Hey guys!
I managed to create this tabs menu, However Webflow is not letting me add links to the tab description… I cant place a link inside a tablink :roll_eyes: How can I get around this? Thankful for all the help I can get. Cheers!

https://preview.webflow.com/preview/master-collection-6931761-c7d8b82c6a61d?utm_medium=preview_link&utm_source=designer&utm_content=master-collection-6931761-c7d8b82c6a61d&preview=e08beb481c7dffd5a20481a8b5c1cfed&mode=preview

someone? :grimacing:

You can’t have a link inside a link, that’s HTML. The tab link element is an HTML (link) tag. You can’t have another inside of it. Webflow is only enforcing the rule.

What do you try to achieve? You would like to have the link inside of the tab, instead of the tab being the link?

Thank you for your reply!
Re: You would like to have the link inside of the tab, instead of the tab being the link?

Yes, something like that. Now i’m using the tab content space for the images. I guess I’m doing it wrong. But this is the only way I could think of to achieve this. Any ideas?

I found this video- but I have no idea how this guy did this.
https://cipriano.wistia.com/medias/kdjl0rf7a5

Hey @vincent - I’m trying to solve exactly that , have a link inside a tab that takes you to a project.

I’ve taken a flowbase tabbed slider template, and customized it so that when I click on a tab, the project is visually previewed , AND a ‘VIEW PROJECT’ text link would appear on that tab to let your second click take you to the project… but I can’t activate a link in the tab.

I thought this would be a cool way to display 4 portfolio projects in one area, and work great for mobile.

Is there a way to force this link within a tab? Or do I need to go back to the drawing board on this one?

Thanks!


PUBLISHED

https://tabbed-slider.webflow.io/

READ ONLY

https://preview.webflow.com/preview/tabbed-slider?utm_medium=preview_link&utm_source=dashboard&utm_content=tabbed-slider&preview=b37af554c5097017430941dea27f50a8&mode=preview

What do you mean by “solving that”?

Sorry! I meant to quote what you said on your previous reply to Cipriano:

“You would like to have the link inside of the tab, instead of the tab being the link?”

I’d like to have the tab be clicked, then a VIEW link appears through an interaction sequence I made, then you click ‘VIEW’ to see that project.

It’s like the tabs are being used for previewing a project hero image, then the VIEW link takes you to it…

In your above image, did you get the ‘Link To Project’ links actually working?

Yes, but it’s a cheat :slight_smile:

I have placed inside of the TAB PANE the same kind of element as the TAB MENU: same dimensions, with 4 children, etc. And I have positioned it with Absolute on top of the TAB MENU.

So maybe you can work out a solution using that technique. Because you will not be able to place a link in the TAB MENU ITEM.

Great thanks! I’ll give it a shot

For those of you that ended up here trying to achieve what Vincent did above, be aware the webflow tab content element defaults to overflow: hidden. I just spent the whole afternoon troubleshooting z-index thinking that was the issue, hopefully you won’t have to. Though reading more in depth about stacking context and finding a stacking context dev tool extension was fruitful as well.

2 Likes

I found a smooth solution:

You have to put an embeded html inside the tab component. Now you can put a Div with a onlick Link:

<div onclick="window.open('https://discourse.webflow.com/t/placing-a-link-inside-a-tablink-webflow-does-not-let-that-happen/135073/2')">Link</div>

Do not use a <a> Tag it need to be a <div>

Have a nice day,
Luca

2 Likes

You are god @FlowerLuca :bowing_man:

I spent so much time on this “problem” and your code run perfect in my project.

Also, if you don’t want the tab to open a new tab, use window.location.href with slightly different syntax…see below

<div onclick="window.location.href = '/link'" class="button"> Button text </div>

Thank you so much for that @FlowerLuca :pray: I’ve struggled a lot with this problem !

Little improved code make this div full size inside of tablink and also open this link in the same browser page

<div style="width: 100%; height: 100%;" onclick="window.location.href='https://discourse.webflow.com/t/placing-a-link-inside-a-tablink-webflow-does-not-let-that-happen/135073/2"></div>

Thank you for your help FlowerLuca