Webflow Smart Tabs

Make the most of Webflow's tabs element.

View the Demos
DEMO #1

Set default tab

The Webflow designer "remembers" the last tab selected in the designer, and makes it the default tab on publication.

Often, designers forget to change that before publishing, so here's an easy attribute method for defining the default tab.

Here's we've put the following custom attribute on "Greece" even though "Italy" is selected in the designer.

[wfu-tab-default]

SA5 Documentation

Italy, often referred to as the boot-shaped country, is nestled in Southern Europe and is renowned for its rich cultural history, culinary heritage, and picturesque landscapes.

Its cities are home to a wealth of architectural treasures from the Colosseum in Rome to the leaning tower of Pisa and the canals of Venice. Its countryside boasts rolling vineyards, the rustic charm of Tuscany, and the stunning Amalfi Coast.

Greece, a country in Southeastern Europe, is renowned for its rich history, stunning landscapes, and warm hospitality.

With a cultural heritage dating back thousands of years, Greece is a treasure trove of historical attractions. The country is the birthplace of democracy, Western philosophy, the Olympic Games, and many scientific and mathematical principles.

France, located in Western Europe, is celebrated for its rich history, artistic influence, and culinary excellence. Its capital, Paris, often called the "City of Light," is home to iconic landmarks like the Eiffel Tower, the Louvre Museum, which houses the Mona Lisa, and the Gothic Notre-Dame Cathedral.

France's picturesque countryside features diverse landscapes ranging from the lavender fields of Provence, vineyards of Bordeaux, to the glamorous beaches of the French Riviera. The country's historical sites also include the D-Day landing beaches in Normandy and the grand châteaux of the Loire Valley.

DEMO #2

Smart tabs

Use the SA5 deck controller buttons at left to navigate the tabs element above it.

  • Works with tabs and sliders
  • First, next, prev, last, and goto item
  • Buttons can target any tabs or sliders on the page. Those within a tab or slide can auto-target their own parent element.
SA5 Documentation

Pixel-perfect paradigms sizzle in the synergy soup, where agile avatars bootstrap the bandwidth. Vector vistas virtualize vibrantly, while cloud-centric code cultivates quantum content.

Dive deep into data-driven dynamics, as crypto-kaleidoscopes concatenate and UX unicorns unleash ultra-responsive realms. Navigate the nexus of neural networks, where blockchain bridges build byte-sized brilliance. Welcome to the wired world of wonder!

Innovative interfaces intertwine with intuitive insights, crafting a canvas where creativity meets code. Seamless synergy sparks scalable solutions, as tech trends transcend, transforming terabytes into timeless tales. Embrace the evolution, where pixels paint possibilities.

DEMO #3

Hidden default tab

Having a hidden tab allows you to return to a no-selected tab state, which can optionally include hidden tab content.

  • Click any tab to show tab content
  • Click the close button to deselect all tabs and collapse the tab pane
How it Works

Italy, often referred to as the boot-shaped country, is nestled in Southern Europe and is renowned for its rich cultural history, culinary heritage, and picturesque landscapes.

Its cities are home to a wealth of architectural treasures from the Colosseum in Rome to the leaning tower of Pisa and the canals of Venice. Its countryside boasts rolling vineyards, the rustic charm of Tuscany, and the stunning Amalfi Coast.

Close Tab

Greece, a country in Southeastern Europe, is renowned for its rich history, stunning landscapes, and warm hospitality.

With a cultural heritage dating back thousands of years, Greece is a treasure trove of historical attractions. The country is the birthplace of democracy, Western philosophy, the Olympic Games, and many scientific and mathematical principles.

Close Tab

France, located in Western Europe, is celebrated for its rich history, artistic influence, and culinary excellence. Its capital, Paris, often called the "City of Light," is home to iconic landmarks like the Eiffel Tower, the Louvre Museum, which houses the Mona Lisa, and the Gothic Notre-Dame Cathedral.

France's picturesque countryside features diverse landscapes ranging from the lavender fields of Provence, vineyards of Bordeaux, to the glamorous beaches of the French Riviera. The country's historical sites also include the D-Day landing beaches in Normandy and the grand châteaux of the Loire Valley.

Close Tab

Source Code

See the Pen SA5 | Core | Tabs Component by Michael Wells (@memetican) on CodePen.