Split Navigation


The users need to navigate a hierarchical structure


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


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


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


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


Enter the verification code you see in the image below