How to create scrolling tab menu (webflow tabs widget)

[Siton_Systems (Ezra Siton)]

Step 1: Create a tab menu:

Class:

• Add tabs_menu to tabs menu wrapper.
• Add tab_link class for each tab link item.
  
  

Styles:

• tab_link change display from block to inline-block (
  

  

• tabs-menu => set breaking to no-wrap (“Text will never wrap to the next line”).
  nowrap css docs.
  

  

Step 3: Set overflow-x by one line of custom code

Add embed-code (Like this it’s easier to copy-paste the tabs to other pages and so on).

CSS overflox-x docs

<style>
  .tabs_menu{
    overflow-x: auto;
  }
</style>

<script>
</script>

** I use an empty script tag - like this the custom code block is more visible (gray box).
** The CSS class selector should match webflow class name.

Publish - the output:

Mobile-only

This pattern is more useful/clean on mobile view only.

To use this only on mobile:

1. desktop - set breaking to normal
   

   

2. Mobile - set breaking to no-wrap
   

   

Related:

• How To Create a Horizontal Scrolling Menu
• CSS layout & positioning | Webflow University

Flexbox approach

One more option is to use flexbox.

Set this for tabs_menu

And this for tab_link