This is the third part of our series on common UI design patterns, and today will be all about the double tab navigation (also known as nested tabs or sub tabs). You can find parts one and two of the series here:
The double tab navigation is a navigation element consisting of two horizontal rows of tabs at the top of a website. Usually spanning the entire width of the page, it displays multi-level content that is sorted in tabs and sub-tabs. The top row of tabs represents the top-level categories and the second allows for a selection of the sub-categories. To easily spot the current location on the site, the active category is visually highlighted.
This navigation structure is best used when the user needs to navigate a large amount of hierarchically structured pages while keeping track of his current location on the site and it is important to display the available content in vertically compact space.
Typical characteristics of the double tab navigation are:
- located at the top of the page below or next to the site branding and header,
- two horizontal rows of tabs first-level and second-level entries,
- used to display hierarchically structured pages and sub-pages of a site,
- up to ca. 10 tabs or sub-tab in each tab bar, usually of same width,
- first tab is reserved for “Home” (unless it is offered as separate option),
- active page is highlighted to indicate user’s current location.
Now that we have a good understanding of the double tab navigation, let’s create one. Here is how it goes …
1. Setting up the project
To build our double tab navigation we will use several pages and layers. To save time, let’s create the main pages in advance. We will need one page for each main caterogy, i.e. one for each first-level tab. (We will add the respective content later.) As an example I have picked a news website with the sections “Home” (it will be linked with the image stencil), “World”, “National” and “Local”. Hint: For easy structuring of your pages, just create a screenflow.
Creating the main pages to be linked in the double tab navigation. Here you can see a screenflow of my finished project.
2. Building the double tab navigation
Our double tab navigation consists of two major parts: the upper bar represents the tabs with the top-level categories and will be built on one layer. The lower bar contains the sub-level entries, whereas each section and its respective content will be created on a separate layer.
2.1. Creating the first-level tabs
Since the first-level tabs remain the same across the site, we start by creating a layer to hold the first-level tabs. To do so, click the “New layer” button in the layers panel. Now we add the first-level tabs to the layer (I also added a logo that links back to the “Home” destination) and link each tab to the respective main page using the “Target” option of the context menu, e.g. the “World” tab should link to the page “World”. Now we can simply display this layer on every page that should contain the double tab navigation by visiting each page and using the checkbox of the layer.
Building the first-level of the double tab navigation and linking each tab with the destination page.
2.2. Creating the second-level tabs
The second part of the double tab navigation requires layers, too. Add one layer for each second-level category. In my example there are nine content layers in total, including four sub-categories in the “World” section, three in “National”, and two in “Local”. The layers will contain the actual content of the website, and the respective layer will be shown when the corresponding entry is selected – while all others will be hidden. In addition, each layer will contain a visual cue to highlight the active entry.
Creating layers for the second-level tabs
To create the second-level tabs we use a rectangle as background, text stencils for the second-level entries and action areas to link the tabs with the content layers. For each content layer (i.e. each page of the website), add text stencils for the second-level entries, keeping in mind the corresponding top-level category the content will appear under (e.g. all layers belonging to the “World” section would contain the entries “Economy”, “Science”, “Culture” and “Sports”), and place an action area on top of each label.
Adding the second-level tabs to each content layer
Then, going through all content layers, use the context menu of the action areas to link each second-level entry to its corresponding content layer. To do so, click on “New interaction” in the “Interactions” tab, and in the interaction dialog select “When the user clicks” and “then change layer visibility” and select the layer to be displayed while setting the visibility to “Show”. To ensure that no other layer is shown, add reactions (one for each layer in the main category) and the change the visibility for each to “Hide”.
Linking the second-level tabs with the corresponding layers and adjusting content display options
Hint: Instead if going through all these steps for each second-level tab individually, define the interactions only for one action area, then mark all of your action areas and click on “Apply these interactions to the selection” in the context menu and simply change the layer to be shown. Since all content layers in one top-level category will show the same set of second-level tabs, you can simply copy/paste them to the other content layers.
2.3. Linking first- and second-level tabs
By default, a click on a first-level tab should show the first of the second-level entries in that category. To achieve this, simply go to each main page and activate the appropriate layer using the checkbox. In this example, the “World” tab is connected with the “World” page, which by default displays the layer “World – Economy”.
Linking a layer with the page to be displayed at the same time
3. Adding page- and layer-specific content
The last thing to do now is adding content to each of our content layers. Also, place a visual indicator on each content layer to highlight the active second-level tab. I used a little line underneath the corresponding entry, but you could also change the background behind the label or alter the formatting of the text label, e.g. bold font.
Remaining on the layer to the page, you can add specific content
By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.
That’s it! You have successfully created a double tab navigation!
Do you need help building a double tab navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!