Dynamically Styling Active Tabs in a CMS Collection Page

Design help General
1

I’m working on a Tabs element inside a Collection Page template, and I’m running into an issue with dynamically setting styles for the active tab.

What I’m Trying to Achieve

I have two color fields in my CMS collection:

  • ButtonBackground (for the tab’s background color)
  • TextBackground (for the tab’s text color)

I want the active tab button (i.e., the one with the “Current” state) to take on these dynamic colors while being the active tab.

The Issue

I can use the Dynamic Style settings to apply these colors to the Tab Link, but the issue is that it applies to all states of that instance. It doesn’t seem to respect the “Current” state for the active tab.

What I’ve Tried

  • Applying dynamic styles directly to the Tab Link → Affects all states.

Is custom code necessary here? Or is it a forgiving fix?

2

To dynamically style the active tab in Webflow using CMS color fields, you need to use custom attributes and JavaScript. First, bind the color fields (background and text) as custom attributes to the tab links. Then, use a script that detects the active tab (.w--current) and applies the stored colors dynamically while resetting the styles for inactive tabs. This ensures the correct styling on both page load and tab clicks. If you need any help with implementation, feel free to connect with me.

3

I would have to see your setup, both readonly and published site links to the page. Are you trying to create one current styling color set per collection page, or are your tabs themselves CMS-driven and each tab has a different current color set?

Either way, you should not need script here.