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:

browser mockup
Share:
Heart icon

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon