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:

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more