Tabs Layout
Overview
The Tab Layout clearly organizes top categories for subject-specific browsing. Within each tab, find related articles and sub-categories.
- Top categories are presented as tabs.
- Each tab page follows a structure similar to the Basic layout.
Note: To display your Knowledge Base on your web page, make sure the page includes the KB shortcode as explained in this article.
This layout is ideal for larger knowledge bases that require tabs to separate different products.
We use it on our other documentation page to distinguish between our add-ons and the core free plugin. You can see a live example of the Knowledge Base here.
Here are live examples:
In some screenshots, the search box is our Pro add-on, Advanced Search.
Common Questions
How to Switch to Tabs Layout
Starting From the Basic Layout
We will start from the Basic Layout and explain the transition to Tabs layout. Here we have the Basic Layout.
The Top Categories are:
- FAQs
- Getting Started
- Other
The Child Categories are
- Overview
Switching to Tabs Layout
When you switch to the Tabs Layout, you will immediately see how categories are displayed. In the next step, we will go over the differences.
Tabs Layout Analysis
On the left, top Categories become tabs.
The Top Categories are now your Tabs. The tabs do not contain articles, only Sub Categories. This is why you see the Overview Subcategory as it's assigned to the Getting Started top Category.
The other tabs have no content as they currently have no Sub Categories assigned to them.
Remember Top Categories have these attributes:
- They do not display articles assigned to them.
- They do display Sub Categories assigned to them.
Top Category Example
Continuing on this example, here is the relationship between the Categories hierarchy (on the left) and the Top Categories (on the right).
The Top Categories ( Getting Started, FAQs, Other ) are set as your tabs. ( Do not assign articles to these categories )
In this example, we have created a few more Sub Categories for demo purposes.
Sub Category Example
The Sub Categories ( Overview, Getting started with Android, Getting started with iOS ) are your typical sub categories. These are the categories into which you can assign your articles.
Why Do I See a Drop Down Instead of Tabs?
The Tabs Layout will only display up to six tabs due to the article width limitation. Even if you have more than six top categories, the layout will change from tabs to a drop down. The drop down can handle a large number of top Categories.
On the left you can see:
The red number show Tabs being used.
Purple numbers show the drop down used.
