Navigation panes for web sites

Just like the web site's content is important, it is important to be able to get to the other relevant pages on the site. You should be able to navigate intuitively on the site. A part of this is the placement as shown on the page about the general design rules. Another part is the design of the navigation pane.

You have two basic types of navigation pane:

1. Orienting navigation panes specifying where you are on the site
2. Links to other pages on the site

Link to other pages on the site is what most people associate with navigation pane. It's like the one under the headline on this page. They come on all shapes and placements, and they are a must for sites containing more than one page. More about those further down on the page.

The orienting navigation panes are usually one line at the upper part of the page on large and complex sites, e.g. news sites where you would have something like this

Name of the news site > Domestic > Politics > Local politics

for articles about local politics, whereas articles about soccer could look something like this:

Name of the news site > Sports > Soccer

Most sites aren't sufficiently big and complex to justify this type of navigation panes, but they do exist.

Menu Item 1

Menu Item 2

Menu Item 3

When moving the cursor over the elements in the navigation pane, it is advisable to have a feed back in the form of something changing. It can be changes in colors, as seen on the example to the right, animations, changes in font size or something entirely different. The effect being used has no influence on the functionality of the link, so in principle, it is not a requirement to have something indicating that here you have something to click on. It is a purely psychological effect. Something is happening where you are holding the cursor, so there is something to click on.

Fixed menus are navigation panes like the one shown above. One line/button, one link for one page. Simple. The individual links can be vertical as a column, as shown above, or they can be arranged horizontally like this:

Menu Item 1

Menu Item 2

Menu Item 3

These are the two most common designs, but they can be arranged in a third and completely different way, should you have the creative urge.

If fixed menus are sufficient for your site, they are definitely preferable, as you avoid a lot of hassle from changing screen sizes in adaptive design.

Drop-down menus are, like slide-out menus, a mouseover effect. The technical part of the programming can be seen on the page about navigation panes when it is done. The effect is quite simple, when the cursor is over the button/link on the navigation pane, a list of menu items rolls out under the button/link. In it's simplest form, it looks like this:

Menu Item 1 Sub Section 1.1 Sub Section 1.2 Sub Section 1.3

Menu Item 2 Sub Section 2.1 Sub Section 2.2 Sub Section 2.3

Menu Item 3 Sub Section 3.1 Sub Section 3.2 Sub Section 3.3

Slide-out menus are, like drop-down menus, a mouseover effect. The technical part of the programming can be seen on the page about navigation panes when it is done. The effect is quite simple, when the cursor is over the button/link on the navigation pane, a list of menu items slides out next to the button/link. In it's simplest form, it looks like this:

Menu Item 1 Sub Section 1.1 Sub Section 1.2 Sub Section 1.3

Menu Item 2 Sub Section 2.1 Sub Section 2.2 Sub Section 2.3

Menu Item 3 Sub Section 3.1 Sub Section 3.2 Sub Section 3.3

On the very small screens, e.g. smartphones, there really isn't any room for drop-down or slide-out menus. At best it becomes small and unclear to look at. On top of that, when a units don't have a cursor, you really can't do a mouseover. On some versions of the browsers for Android and IOS the browsers interpret onmouseover as onclick, so when you click on the button/link, the menu opens like it would do with mouseover, but it doesn't work all that well. The solution to the problem with screen space has become harmonica menus. You are working with one clumn, and when clicking the button/link, the column is expanded with sub sections. In it's simplest form, it looks like this:

Menu Item 1

Menu Item 1

Sub Section 1.1 Sub Section 1.2 Sub Section 1.3

Menu Item 2

Menu Item 2

Sub Section 2.1 Sub Section 2.2 Sub Section 2.3

Menu Item 3

Menu Item 3

Sub Section 3.1 Sub Section 3.2 Sub Section 3.3

Harmonica menus are, from a programming standpoint, a bit more complicated than drop down/slide out menus to make work well, but it is worth the trouble looking into this type of solution. If you are a bit tech savvy, you can arrange for big screens using drop down/slide out and small screens changing to harmonica menu.

You choose what makes sense to you and what you like. As long as it works intuitively, you are fine. Remember that it also has to work on small screens, i.e. tablets and smartphones. It's as simple as that. If the design of the navigation pane gets in the way of the page content, you redesign until it works.