Split Navigation

Problem

The users need to navigate a hierarchical structure

Solution

Break up the hierarchy in two separate page layouts


Use when

Hierarchal structure that consists of 4 levels, content on levels 2-4. Split navigation is a variation of Directory Navigation. It's important to quickly switch between pages on levels 3 and 4. There is no need to quickly switch between pages on levels 1 and 2. No content on level 1

How

The hierarchy is broken up in a start page and a topic page. The start-page contains levels 1 and 2 (links) of the hierarchy. By clicking a link, one can navigate directly to a level 2 topic page. This "topic page" contains an index with levels 3 and 4. All textual information is shown on this topic page. Users can switch between pages on levels 3 and 4 by clicking on the index links. Additionally, Breadcrumbs are used to give feedback about the structure and to go back to the first page.

Start page

Topic Page


Why

By breaking up the hierarchy in two page layout the first level is basically chopped off after the first selection. The result is a 3 level page that is easy to navigate. The bread crumb allows the users to go back to the first page.

More Examples


This example from the monsterboard shows the Topic page complete with bread crumb.


plml logo

Comments

0 comments have been added to this pattern



Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha