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:

Changing Text

Interactions
Cloneable
Tricks

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

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more

Thick Underline

Cloneable
Design
Tricks

An editable thick underline for your Headlines

Read more