If you want to see what I’m talking about. Look at the dropdown in this read-only link that says solutions.
Notice how the dropdown animation is activated on load. The animation being that the arrow points up and the color of the text changes to blue. That’s the first bug.
The second bug is when you change the tabs within that dropdown the whole dropdown disappears for a second. And on tablet mode the whole menu closes when you change the tab, so it’s un-usable.
I know the problem is the tabs because when I delete them, that dropdown doesn’t do the animation on load. I even tested it with this simplified example to prove it
Funny enough, hiding the tabs doesn’t fix anything; you have to completely delete it.
It’s weird how I’ve found no one in the forum that has run into this problem. So I don’t know if it’s just me, or that no one has tried to put tabs inside a dropdown in a menu.
Definitely a conflict/bug. Surprised this hasn’t been discovered before.
I recommend dropping a tab component into a custom hide/show interaction vs using the native dropdown component.
I understand that interaction, but how would I make it so that when another tab is clicked the previous one gets hidden? It seems like that functionality is tricky to do custom.
Shoot, that’s the conundrum. Your native dropdown component is closing automatically when you select one of the links in your interior tab component. I found that someone recently had this issue and they ended up making a custom tab interaction rather than a custom dropdown interaction, like I’d suggested:
Yeah but I dont understand how to make a tabs component with only webflow interactions. I think its super tricky, if not impossible, to use webflow interactions to have one tab open that automatically closes once another tab is clicked. Having all tabs be interconnected with each other is the problem. I think this is why Webflow decided to create the tabs element in the first place.
I’ve searched, and there doesn’t seem to be anyone that is doing a fully custom tabs component using webflow interactions. Let me know if you do find one. I guess I’m gonna go find a tutorial on how to do tabs with all custom javascript.
<script>
// Get all the tabs and tab panes
const tabs = document.querySelectorAll('.tab');
const tabPanes = document.querySelectorAll('.tab-pane');
// Add mouseover event listener to each tab
tabs.forEach((tab, index) => {
tab.addEventListener('mouseover', () => {
// Remove the 'active' class from all tabs and tab panes
tabs.forEach(t => t.classList.remove('active'));
tabPanes.forEach(pane => pane.classList.remove('active'));
// Add the 'active' class to the hovered tab and corresponding tab pane
tab.classList.add('active');
tabPanes[index].classList.add('active');
});
});
</script>
While using the following structure inside of Webflow. That should recreate the tab functionality without it messing with the dropdown menu.
This code adds an active class to the tab and tab pane on hover. And the trick is to use css to make it look like actual tabs. You can rename the classes of course, but don’t forget to change it in the javascript code as well than.
