Description
Tabs make it easy to explore and switch between a lot of content in a limited space, especially for step-by-step directions or to present content that has been categorized into smaller sections. Keep tab headings short so that the content fits easily on one line.
Adding and Editing
Tabs are managed using the Lists content type. To create a new set of Tabs, click Content > Lists, then create the list items.
To add the menu to a page:
- Drag and drop the List widget under the Content menu
- Select the list to display
- Click the Settings tab
- List template - Tabs
- Save
Code
Tabs can also be manually created within the content editor using the following code:
<ul class="tabs">
<li>
<div class="title">Tab 1 Title</div>
<div class="content">
<p>Tab 1 content</p>
</div>
</li>
<li>
<div class="title">Tab 2 Title</div>
<div class="content">
<p>Tab 2 content</p>
</div>
</li>
<li>
<div class="title">Tab 3 Title</div>
<div class="content">
<p>Tab 3 content</p>
</div>
</li>
</ul>
Example