Turn Tabs Into a Dropdown Menu on Mobile

Hey guys! Thought I’d share something you might find useful for future projects.

An issue I’ve run into over and over again, is the responsiveness of the tab component.

At the moment, if you have more than 3 or 4 tabs inside of the tab component, you need to stack them vertically on mobile views, which pushes the content down. So if you have 10+ or more tabs, your content will likely be so far from the menu, that the user will not now they belong to the same component. They need to scroll back to the top to change tabs.

This is a neat workaround to the problem. It turns the tab component into a neat little dropdown menu, which is better user experience, and reduces the amount of scrolling.

STEP 1: STYLING INSTRUCTIONS

  • Create your tab component as usual. Style it for desktop.

  • Create a blank DIV immediately above the tab component. Name it “Tab Dropdown”. Hide it on desktop, as we don’t need it at this breakpoint.

  • On mobile, style your new “Tab Dropdown” DIV to look like a dropdown. Give it a height of 60px, Add a piece of text inside like “Choose Item”. With the background image tool, add a dropdown arrow. Style it any which way you want.

  • Style the tab links inside of the tabs menu to be full 100% and blocks instead of inline. Give them a height of 60px. They should now look like a vertical list.

  • Make sure the tabs menu has the background color property set to transparent and that your menu items have the background color you’d like, for example white, with black text. This is important because when the menu is open, the user needs to see your “Tab Dropdown” to be able to close it.

  • Make your tabs menu have absolute positioning. Anchor it to top. It will now overlap the tabs content. This is normal.

  • Give your tabs menu a Z-Index of 10, or higher than your tab dropdown. Important, as we need it to sit atop the Dropdown to trigger the “close” interaction, once we want to close the menu.

  • Now, give your tabs menu a TOP MARGIN of -60px, and then give it TOP PADDING OF 60px.

This is what makes your tab menu look like a dropdown.

STEP 2: INTERACTION INSTRUCTIONS

  • Now, with your dropdown “styled”, select your tabs menu and set it to Display: None. You’re completely hiding it, leaving only the tabs content.

  • Select your “Tab Dropdown” DIV and give it an interaction. Using IX 2.0’s element trigger, select “Mouse Click”, create a new animation called “Show tabs”.

  • We don’t want the “Tab Dropdown” to be affected. We want it to be the trigger, so add the “Tabs Menu” component to the animation and give it a Display: Show property. We are telling the browser to open the Tabs menu when the user clicks on the Tab Dropdown.

  • Now, select your tabs menu and assign it another element trigger. This time, create an animation called “Hide Tabs”. This time we do want to affect this element only. So the interaction will be a simple “Display: None”.

You’re done. When a user clicks the dropdown, the tabs menu will show, and then, clicking the tabs menu will hide it.

Again, feel free to clone the project and replicate the steps yourself. It’s super simple once you get the hang of it!

https://webflow.com/website/Webflow-Tabs-as-Dropdown-Menus-on-Mobile

20 Likes

Haha @samliew, Dude he was so proud of this neat effect, as I would be too! @cpjackman, you probably could charge for this, like $10. Heehee. Just teasing, man this is nice. I’m sittin here looking at it, and I’m still trying to figure how you hid the menus?? You sneaky little genius you :sunglasses:

This is phat! Love it. Take care.

good but I think bootstrap can do it easily… can’t it?!

That’s great @cpjackman! Going to be super useful. I was looking for the best approach of this issue with mobile Tabs but never thought about making the tab menu a dropdown.

As I went looking into it with the sharing link I thought I’d have to concentrate to understand the complicated, intricate interaction, but no, you’ve found the simplest way to make it work and exactly look like a dropdown menu :slight_smile: Closed the site and already know how to reproduce it.

Great job and thanks a ton for sharing that, immediate adoption :smiley:

1 Like

Wanna start a list of what Bootstrap can do easily vs. what Webflow can do easily? That’s going to be hillarious :smiley:

2 Likes

@cpjackman That is so cool, great idea :webflow_heart:

1 Like

why hillarious?!
list it please… I’ve never tried webflow…
gimme a list:smiley::sunglasses:

I was teasing you and joking because it’s hardly comparable :slight_smile: Bootstrap is a very good and efficient framework to type code efficiently, with a consistent responsive result. Webflow is a live design editor. It’s hardly comparable even if they both aim to create web pages and sites.

Go! Go! Go! :wink:

WAIT!!! DID I HEAR THAT? Someone just said, “I’ve never tried Webflow?” Nooooo… I didn’t hear that. :open_mouth:

Thanks my man! Happy new year to you and your family.

I’m still trying to figure out what legacy interactions you used for the tab dropdown and tabs menu and @cpjackman since they are indicated but not saved. Also, is the tab dropdown a container, or is it the Dropdown component since I can’t find the latter in the navigator tree?

Hi @robonohra - I’ve just added instructions to the original post.

This isn’t using any legacy interactions. The “Tab Dropdown” and “Tabs Menu” are assigned two simple IX 2.0 interactions. Feel free to clone the project and replicate it with the steps I posted above. If you’d like help with it, I can record a quick video and send it to you. Just PM me!

@samliew — Hi! Respectfully, I’m requesting this be moved back to Tips and Tricks, as I have provided a step by step list of instructions to replicate it, as well as a clonable project.

This is great & super helpful.

One shortcoming is that once the dropdown is opened/closed, the tabs remain closed (effectively disappearing) if you return to a larger viewport. This could be an issue for larger phones or smaller tablets, where a vertical orientation displays mobile/dropdown & horizontal orientation displays desktop/standard tabs, or persistently if you try to implement the dropdown for tablet viewport.

If an Initial State could be contained to the viewports on which the Interaction is being triggered, this issue could be overcome.

Thanks @cpjackman . This is great.

:wink:

This is wonderful. yeah. I know I just bumped this and it reignited the 4 month window to keep the replies going… but it’s worth it in case someone stumbles upon this in the feed.

I went looking for such a feature and I plan to implement this tonight !!

This is awesome! Thanks @cpjackman you sir are a smart wiz! Been scouring the interwebs to find a solution for this. I know this post is a year old but just . a quick question about your solution. When I go back to the the desktop view and click on the tabs the whole tab menu disappears too :confused: any idea how I can fix that, I noticed that yours doesn’t do this… Thanks again everybody!

Here’s my demo site: https://preview.webflow.com/preview/runsandbox?utm_source=runsandbox&preview=bfd22ff366884af5cf36429969c63d06

Thanks @cpjackman, a real life saver. I would love it if the Dropdown text reflects the current tab name, do you have any magic up your sleeve for that?

I just saw this thread and @SiavashVJ , if you’re still on the forums, here is the answer to your question:

4 Likes

AWESOME. I think you forgot to paste the JS code though :slight_smile:

Edit, found it in the YT description.

Worked like a charm! Thanks again!

Hey! I did all of this, but I am not sure how to edit the interaction to be only visible on mobile and not desktop? I end up having a disappearing menu on desktop once a menu item is clicked.