Tabulations

Use the Tabs element to add responsive, tabbed content to your Webflow project.

Throughout this tutorial:

  1. Include tabs
  2. Append content to the tabs
  3. Design tabs

Include tabs

Tabs icon thumbnail

To incorporate the tabulations element, visit the Insert panel and navigate down to the components section. Then, click and drag the Tabulations element to position it on the canvas. It will automatically occupy the width of the container it is placed in.

The eleven elements that are included in the components section are background

Structure of tabulations

The Tabulations element consists of the Tabulations Wrapper, within which lies the Tabulations Menu and the Tabulations Content.

Append content to a tab

Once you switch to a tab, you can integrate elements into the tab pane using a couple of methods:

Style tabulations

You have the ability to customize each element within the tabulations component.

between lively and dormant tabs. For instance, you can modify the font hue and backdrop hue to diverge from a regular tab. To customize the present tab, just click on the dynamic tab tie.

A set of tabs called Monthly Plans (selected), Annual plans, and sesquicentennial plans are displayed.

Interact with tab ties using hover effects

You can include a hover impact to the tab ties using the subsequent guidelines:

  1. Pick a tab tie that isn’t currently active
  2. Opt for Hover within the States dropdown list
  3. Design the tabs as per your preference for the hover visual
  4. Select None in the States dropdown
  5. Integrate a shift in the Styling department with the favored smoothness and timeframe
Step one on the left, select the Annual Plans tab. Step two on the right, select Hover (highlighted) in the states dropdown menu.

Alterations in Presentation 

To manage the shift amid diverse tab panes:

  1. Determine any of the tab elements
  2. Head to the Element Settings panel
  3. Choose the gentling from the Easing Method dropdown
  4. Establish Fade In/out duration (ms)
Step one on the left, select the tabs menu from the navigator panel. Step two on the right, edit the Easing in the tabs settings panel. a
Ewan Mak
Latest posts by Ewan Mak (see all)