Tabs

Modified on Sun, 28 Sep at 4:47 PM

Tab blocks are an excellent choice when you have a lot of content which needs to live on one page. By grouping your content into tabs the user is able to more easily navigate without the visual strain of endless scrolling on a page.

Tabs can be utilized in either a vertical or horizontal orientation. However you choose to use them, you may want to consider using them the same way throughout your site so that the user does not need to "relearn" your site on different pages, and instead knows what to expect and how to find the information.

Adding Tabs

Tabs can be added either from the block prompt on the page (/tabs), or from selecting Tabs from the blocks toolbar. 


  1. Select the first tab style.

  2. Highlight the titles in the tabs to change the title

Add Content To Your Tabs

Just click in the tab body and start adding blocks like it were a page.

Moving Tabs

When you click on a tab title it will show arrows if you need to change their order. You can also reorder the tabs from the list view on the left, by selecting the tab and dragging it to where you would like it to live.

Deleting Tabs

You can use the "x" next to the arrows. Be warned if you a delete a tab, it's content will also be deleted.

Tab Settings

From the dropdown in the general settings for the tab block, select which tab should be open upon page load. If you leave this blank then the page will load showing whichever tab was last active in the editor.

 

Icons

You can put an icon in your tab, which can be a nice way to visually breakup text. Select the tab you are adding an icon to. In the block properties panel on the right, click the "style" tab and scroll down to the " tab title icon settings" accordion and open it. There you can select in icon, position it with text and size it for each of your tabs.


We recommend keeping your tab label text and consistently positioning it throughout the site (so if you opt for left of text, do that everywhere you use a tab icon). We also recommend that you are consistent with your sizing.

A note about selecting an icon. Things sometimes take a few tries to find. For example, if you type "email" nothing comes up, but if you type "envelope" you get a lot of choices. It's a big database, so try a few synonyms before giving up.

Related Articles:





Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article