Tabs

Example 1: CMS Tabs

A real-life true CMS-driven native Webflow tabs component

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List (the feed)

  • The structure of our native Webflow Tabs

  • The .tabs() component to create a CMS powered tabs element.

These are native Webflow tabs

In Designer, this tabs component has 3 tabs

Project 1

Branding, Web Design

This is some text inside of a div block.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Project 1

Branding, Web Design



The CMS List below is our "data feed". This will populate new Tab Links and Tab Panes in the Tabs component above.

On the published website, CMS Library creates a new new Tab Link and Tab Pane for each CMS Item in the list below.

The child of the CMS Dynamic Item ('.tabs-this-is-copied-to-tab') is 'copy and pasted' inside each 'Tab Pane' above. Our '.tab-name' defines the text inside the Tab Link

This allows you to create a 100% CMS-driven Webflow native tabs component 💪

Project 1

Branding, Web Design

Project 2

Branding

Project 3

Web Design

Project 4

Development

Project 5

Development

Project 6

Motion Graphics

Project 7

Branding

Project 8

Web Design

Project 9

Web Design, Development

Project 10

Web Design, Development

Project 11

Strategy Consulting

Project 12

Web Design, Development

Project 13

Web Design

Project 14

Strategy Consulting

Project 15

Branding, Motion Graphics

Project 16

Branding, Web Design

Project 17

Strategy Consulting

Project 18

Branding, Web Design

Project 19

Branding, Web Design

Project 20

Branding, Web Design

Project 21

Branding, Strategy Consulting

Project 22

Branding, Strategy Consulting

Project 23

Motion Graphics

Project 24

Motion Graphics

Project 25

Branding, Web Design

Project 26

Branding

Project 27

Web Design

Project 28

Development

Project 29

Development

Project 30

Motion Graphics

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.