Print

Tabs Layout

Created OnSeptember 15, 2021
Updated OnDecember 6, 2024
By:Dave
5 out Of 5 Stars

1 rating

5 Stars 100%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Views455

Overview

Copy the URL link to this section to share

The Tab Layout clearly organizes top categories for subject-specific browsing. Within each tab, find related articles and sub-categories.

 
Key Features
  1. Top categories are presented as tabs.
  2. Each tab page follows a structure similar to the Basic layout.
Click to zoom
Tabs Are Top Categories

Top Categories are represented as tabs. Each tab can be a product, service, or area of your topic. Top Categories cannot have any articles. They can only contain sub-categories shown within each tab.

How to Add This Layout to Your Page

To display this layout on your web page, you will need one of the following:

a) KB layout block (recommended) - see the KB Blocks article.

b) 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:

  1. Demo 3
  2. Demo 4


In some screenshots, the search box is our Pro add-on, Advanced Search.

Common Questions

Copy the URL link to this section to share
How to Switch to Tabs Layout

Follow instructions below.

Go to instructions
Why Do I See a Drop Down Instead of Tabs?

Learn more about Tab limitations. 

Go to explanation

How to Switch to Tabs Layout

Copy the URL link to this section to share
Step

Starting From the Basic Layout

Copy link to this section: 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

 

Basic Layout and Categories Admin
Click on the image to Zoom
Step

Switching to Tabs Layout

Copy link to this section: 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.

Click on the image to Zoom
Step

Tabs Layout Analysis

Copy link to this section: 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:

  1. They do not display articles assigned to them.
  2. They do display Sub Categories assigned to them. 
Each Tab Example
Click on the image to Zoom
Step

Top Category Example

Copy link to this section: 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.

Top Category Example
Click on the image to Zoom
Step

Sub Category Example

Copy link to this section: 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.

Sub Category Example
Click on the image to Zoom

Why Do I See a Drop Down Instead of Tabs?

Copy the URL link to this section to share

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.

Was this article helpful?
5 out Of 5 Stars

1 rating

5 Stars 100%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Tags:
Table of Contents

Copyright © 2024 Echo Plugins. All Rights Reserved.