Discover the best cms-tabs websites created by professional designers. Get inspired and start planning your perfect cms-tabs web design today!

Creating a custom content slider with tabs which changes background images as well as content. It uses CMS.

Tabs-slider

tabs-slider

Refokus

How to add CMS Tabs in Webflow?

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

CMS Tabs

CMS Tabs (by Refokus)

Have you ever wanted to make a scrolling list like on Nextflix, Hulu or the App Store? It's super easy with a couple lines of Webkit custom code. It's always smooth on desktop but without the code it's not smooth on mobile, but this'll fix that. I like to use it on tabs and to display CMS content. It's another step towards making an app with webflow.

Check out my app template too. It used this and many other cool things!
https://webflow.com/website/Minim-App-Template

UPDATE v2
- Ditched the nasty Netflix Styles
- Added a CMS Collection
- Added an unbounded CMS collection for easy copy-pasta.

STEPS:
1. Copy the HTML Block called " Copy This HTML"
2. Copy the Scrolling List you need. (CMS or not)

Smooth Horizontal Scrolling For Mobile

horizontal-webkit-scroll-minim

Finsweet

Create a CMS-powered native Webflow Tabs component with Attributes.

Find more solutions at No-Code Attributes directory for Webflow: https://www.finsweet.com/attributes/directory

Made with 💪 by Finsweet

CMS Tabs Example by Attributes

Webflow CMS Tabs

I have updated this template to allow for perks, and tabbed views of the various collection lists. 

It has a full memberstack.io integration, a collapsible tabbed sidebar, CMS driven pricing tables, member profiles, business listings, and more.

Enjoy.

Member Directory Prototype

Filter blog category using tabs and cms filters.

Filter blog category using Tabs

filter-blog-category-using-tabs

Want a custom website built for your restaurant business?
Visit flowmarc.com or email hello@flowmarc.com

This free landing page template on Webflow is built for users who need a clean, simple, and engaging landing page.
Use this free template for your startup.

Inspired by one of Figma's designs.

Features:
- Interactions and Animations
- Mobile Responsive Design
- CTA blocks (Call to Action)
- Tabs Menu
- Clean design
- Customizable and modification
- Scaleable Design
- Complete Style Guide System 
- Ready to Launch

Want a tailored designed website for your business? 

Reach out to us:

www.flowmarc.com

hello@flowmarc.com

https://www.facebook.com/flowmarc

https://www.instagram.com/flowmarc_com/

https://www.linkedin.com/company/flowmarc/

Oppso Restaurant

This is a small example on how to create CMS tabs in webflow. 

Feel free to clone!

cms-tabs

👌  Ce projet clonable est issu de la formation webflow INIT Program.
Il accompagne un exercice de reproduction permettant de mettre en situation les acquis autour de la structure, du style, du responsive, des animations simples et du CMS.

🔗  https://www.init-program.fr/

elium-vtheo

INIT Chap.3 - Elium Studio (Obj. Reproduire la structure du site)

This is a simple Youtube tabs setup, no CMS — there are a fixed number of tabs each with a different video. A small snippet of code in the <body> section of the page settings stops the current video playing when any tab is clicked. Please don't ask me how to further customise the code as I don't know howwwwwwwwww

Thanks to @samliew and @weebhek for this solution.

Youtube Video Tabs

youtube-video-tabs

Minimilistic Static and CMS dynamic Menu Cloneable. 

Features:
- Tabs Menu Static
- Tabs Menu with CMS

Want a tailored designed website for your business?

Reach out to us:
www.flowmarc.com
hello@flowmarc.com
https://www.facebook.com/flowmarc
https://www.instagram.com/flowmarc_com/
https://www.linkedin.com/company/flowmarc/

Tabs Menu | Restaurant Menu CMS

Tabs Menu Restaurant Menu CMS

👌  Ce styleguide clonable est issu de la formation webflow INIT Program. Il s'agit d'une page pré-conçue, prête à l'usage permettant de définir dès le début du projet les grandes lignes graphiques du site. 

🔗  https://www.init-program.fr/

INIT - STYLEGUIDE

👌  Découvre comment quelques lignes de JS peuvent ajouter ton contenu dynamique issu du CMS à un élément TAB. Deux .class à modifier, un morceau de JS à ajouter. Hop c'est en place ! 

🔗  https://www.init-program.fr/ 
🔗  https://www.youtube.com/watch?v=1sdFX39ae9M&lc=UgxnNkKhKz4XIr3l8bp4AaABAg

Dynamic CMS Tabs v2

INIT - CMS Dynamic Tabs

[ES]
Con este clonable podrás aprender a crear Tabs CMS utilizando dos herramienta diferentes, Refokus tools y Finsweet Attributes.

Puedes ver el siguiente tutorial donde te muestro como hacerlo paso a paso:
https://www.youtube.com/watch?v=iA1avfyMQBw

[EN]
With this clonable you will learn how to create CMS Tabs using two different tools, Refokus tools and Finsweet Attributes.

You can see the following tutorial where I show you how to do it step by step:
https://www.youtube.com/watch?v=iA1avfyMQBw

CMS Tabs en Webflow [Pestañas CMS]

Tabs CMS en Webflow - Pestañas CMS

A pretty simple pricing component (CMS): one with tabs, the other one without. No custom CSS/code/etc. 
Feel free to clone, revamp and use for whatever.

CMS Pricing Component

CMS-powered Pricing Component

Want a custom website built for your architect business website?
Visit flowmarc.com or email hello@flowmarc.com

This free landing page template on Webflow is built for users who need a clean, simple, and engaging landing page.
Use this free template for your startup.

Inspired by one of Figma's designs.

Features:
- Interactions and Animations
- Mobile Responsive Design
- CTA blocks (Call to Action)
- Video hero Section
- Slider testimonials
- Buttons hover animations
- Clean design
- Customizable and modification
- Scaleable Design
- Complete Style Guide System
- Ready to Launch

Want a tailored designed website for your business?

Reach out to us:

www.flowmarc.com
hello@flowmarc.com
https://www.facebook.com/flowmarc
https://www.instagram.com/flowmarc_com/
https://www.linkedin.com/company/flowmarc/

Arc - Professional Architecture

Arc - Architecture Company

Welcome designers to the family Madrigal! Check out how I used the Finsweet Attribute library to set up some Encanto-themed CMS tabs in Webflow. The library is able to dynamically input and create my collection list items into the tab component. 

YouTube Tutorial: https://www.youtube.com/watch?v=c1c75ISmKiI&ab_channel=CullenKuch

Discover cms tabs websites built by the Webflow community

Discover cms tabs websites built by the Webflow community