Using A Dropdown Component To Control Tabs In Webflow
Link to cloneable
https://try.webflow.com/dropdown-tabs-bl
In this video, I share with you how I created this tabs component in Webflow, which is also controlled by a dropdown component.
The reason for this is that while the tabs menu is great, when users navigate the mobile experience, having a dropdown menu can sometimes work better than stacking each tab link vertically.
In my example, I have a tabs component with three tabs and a dropdown component with three dropdown links. We're going to assign each dropdown link a data attribute and a value. This value will be what we name each tab in the tab settings.
When we name a tab in Webflow, it automatically receives a data attribute of 'data-w-tab'.
We're then going to use JavaScript to simulate a click on the tab menu when we click on the respective dropdown link.
The forum post mentioned in the video
https://discourse.webflow.com/t/need-...
Los Angeles Photo
https://unsplash.com/photos/a-person-...
Miami Photo
https://unsplash.com/photos/high-rise...
Seattle Photo
https://unsplash.com/photos/an-aerial...
Link to cloneable
https://try.webflow.com/dropdown-tabs-bl
----------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
https://amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
https://library.relume.io/?via=brian
---------------------------
👉Semflow The #1 SEO tool for Webflow & Framer
https://bit.ly/3Zfaa3z
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 Use BRIAN99512 at checkout and get 20% OFF at FULLERMOE. Watch a demo here! https://fullermoe.com/welcome
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
https://untitledui.lemonsqueezy.com?a...
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
#webflow #javascript