Streaming live at 10am (PST)

How to create scrolling tab menu (webflow tabs widget)

Step 1: Create a tab menu:

Class:

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

Styles:

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

image

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

Flexbox approach

One more option is to use flexbox.

Set this for tabs_menu
image
And this for tab_link
image