Trello Logo
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:

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Round Scroll Indicator / Progress Bar

Cloneable
Interactions
Animation

A round scroll indicator mad with Webflow elements and interactions

Read more
White Arrow icon

Pass Parameters

Cloneable
Code

Pass input fields parameters and add them to the destination URL.

Read more
White Arrow icon

Before / After effect

Cloneable
Tricks
Interactions

A Before / After effect for photos, without any code. Only Webflow's interaction.

Read more
White Arrow icon