CMS Tabs

Create powerful tabs where the tab menu and content are managed from a CMS.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How to add CMS Tabs in Webflow?[.c-title_step]

Use Refokus CMS Tabs to create powerful tabs where the tab menu and content are managed from a CMS collection. 


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/cms-tabs/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that means “Add a custom attribute”.

  • Firstly, you need 2 Collection Lists, one for the Tab Menu, and another for the Tab Content (both same Collection)
  • On the Tab Content collection list, add [.c-tool_tag]r-cms-tabs="content"[.c-tool_tag]
  • On the Tab Menu collection list, add [.c-tool_tag]r-cms-tabs="list"[.c-tool_tag]
  • Choose the tab interactions by adding
  • [.c-tool_tag]r-tabs-interaction="click"[.c-tool_tag] (for click) or [.c-tool_tag]r-tabs-interaction="mouseover"[.c-tool_tag] (for hover).
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.