Force Tabs module (not tabs container) to scroll horizontal on desktop

Ask for Help
1

Currently the tabs module defaults to adding a “More” button on the right hand side if there are more tabs than can fit on the screen. On Mobile, this doesn’t happen and it’s just scrollable. Can I force it to be scrollable on desktop without a “more” button?

2

No native solution for this I believe, it should be a feature request.

3

I was just testing directly in the DOM without adding any class names. This seems to work:

[data-orientation="horizontal"] > div {
  width: 100vw;
}

[data-orientation="horizontal"] {
  overflow-x: auto;
  scrollbar-width: none;
}

[data-orientation="horizontal"]::-webkit-scrollbar {
  display: none;
}

This ensures that the horizontal tabs fit the full viewport width, allow horizontal scrolling, and hide the scrollbar across browsers.

2 Likes
4

That’s genius, so I assume this means you force the component to fit the width so it doesn’t trigger a state where it has to use “More” right?

Was there a div width limit that triggered the “More” button on specific screens, so you assigned it 100vw? Or was overflow-x limited?

Thanks for sharing.

1 Like
5

Glide’s JS decides to show the “More” button whenever the tabs don’t fit within their container, which can depend on the parent container’s width or the viewport. By setting the container width to 100vw (or higher for very long tabs), I essentially bypass Glide’s internal check and prevent the “More” button from appearing.

So, using vw here is a practical hack—not an official rule, just a way to work around Glide’s JS behavior while keeping the tabs scrollable horizontally.

ScreenRecording2025-09-10084452-ezgif.com-video-to-gif-converter

Alternatively, you can use width: min-content on the container:

[data-orientation="horizontal"] > div {
    width: min-content;
}
2 Likes
6

Thank you, that’s so genius!

1 Like