Apr 3, 2020
White Arrow icon
Back to all Elements

Tabs with scrollable (sideways) Menu

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Step 1:
Use the Tabs widget to create your tabs and your menu. Design in as you like :)

Step 2:
Give the menu Width:100%, Display:flex, Overflow:auto

Tabs menu properties

Step 3:
Give the menu links Flex-shrink:0, Flex-grow:0 (Sizing: X)

Tab links properties

To add Desktop mouse scroll, add the next code before the </body> tag. Remember to change the .tabs-menu class to whatever class you gave to your Tabs Menu element.

Code by Kevin Simper from here

<script>
const slider = document.querySelector(".tabs-menu");
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("mousedown", e => {
 isDown = true;
 slider.classList.add("active");
 startX = e.pageX - slider.offsetLeft;
 scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
 isDown = false;
 slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
 isDown = false;
 slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
 if (!isDown) return;
 e.preventDefault();
 const x = e.pageX - slider.offsetLeft;
 const walk = x - startX;
 slider.scrollLeft = scrollLeft - walk;
});
</script>

Copy

Last, but not least-
If you would like to remove the ugly scroll bar that windows and android OS usually add to scrollable elements, then add this code in the <head> tag:

<style>
.tabs-menu::-webkit-scrollbar {
display: none;
}
</style>

Copy

Preview:

Share:

Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon