Resources
Copied to clipboard

Sliding Tab Menu Interaction

Click
Attributes
Thumbnail image of sliding tab menu interaction resource

About This Resource

Webflow’s native tab menu interaction can sometimes feel a bit boring, the active tab changes instantly without any animation, which isn’t very engaging. With this Sliding Tab Menu Interaction solution, you can bring your tab menus to life using smooth animations and a sliding background effect. Customize the background, easing, and duration however you want.

Resource Documentation

Core (Essential for Functionality)

Add the following script before the closing body tag.

<script src="https://cdn.jsdelivr.net/gh/hadiaslam-repo/pro-webflow-components/pro-tab-menu.js"></script>

Add pro-tab-menu to define the tab menu element

Name
pro-tab-menu
Value
true
true
true
Visual guide on adding pro-tab-menu attribute

Add pro-tab-background to define the background for active menu

Name
pro-tab-background
Value
true
true
true
Visual guide on adding pro-tab-background attribute

This element can be placed anywhere on the page. After the page loads, the background element will automatically be inserted inside the pro-tab-menu and positioned behind the active tab.

💡 Pro Tip: Set the background element to position: absolute to prevent any layout shift after the page loads.

Customization (Optional Enhancements)

Add pro-tab-ease to define the animation timing function

Name
pro-tab-ease
Value
{{custom ease}}

Add this attribute on the element with pro-tab-background

Visual guide on adding pro-count-ease attribute

‍

The default easing is ease if the attribute is not present, but you can override it with any of the following values:

  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(custom bezier)

‍

If you're also animating the text properties of the active menu item, make sure the text and background animations have matching ease properties for a smoother experience.

Add pro-tab-duration to define the duration

Name
pro-tab-duration
Value
{{duration in ms}}

Add this attribute on the element with pro-tab-background

Visual guide on adding pro-tab-duration attribute

The default duration is 300ms but you can customize it with custom duration.

If you're also animating the text properties of the active menu item, make sure the text and background animations have matching durations for a smoother experience.

Use This Solution Multiple Times on a Page

This solution supports multiple tab menus on a single page

If you want to use this solution multiple times on a single page, just add a unique suffix to the attribute values

  • pro-tab-menu="true", "true-2", "true-3" and so on.
  • pro-tab-background="true", "true-2", "true-3" and so on.

‍

You dont have to add suffix to the pro-count-ease and pro-count-duration values.

Copy Element

Share This Resource

Resource Examples

Example 1 - Sliding Tab Menu Interaction With Bouncy Effect

Example 2 - Comparision Between Native and Custom Tab Menu Interaction