Top bar navigation seems like a Good Thing. It works, people know where to find it and how to use it. But under which circumstances can I omit it, in favor of less clutter and larger images?


4 Answers 4


I'm not entirely sure what you mean by "top bar navigation" - are you referring to horizontal navigation at the top or the page, or would vertical navigation also be included in that?

There are always exception cases, and while, as you said, people are expecting to see navigation near the top (and the bottom) of the page, there are times when going against that can work out well.

For example, on Muir Glen's website (here) they use a fixed position navigation at the bottom of the page, leaving the top for their branding to take center stage. The navigation is still very prominent and easy to find, so I doubt it would lead to too many usability problems.

Also, vertical navigation UIs have their uses - if you have a lot of nested drill-down menu options, vertical is better to use than horizontal (ex. hovering over Services shows several options, hovering over those options reveals its own options, so on and so forth).

Probably the most common use of an unconventional navigation are Flash based sites (unfortunately, they often do them incorrectly). I believe the best use of a Flash on the web (in creating whole sites) is to create a site more concerned with experience than content. In this case, integrating navigation in a creative way is completely acceptable because the purpose of the site is about the user's experience, not about quickly finding content. Examples would be scattering navigation through polaroids strewn across the page (or similar) or integrating it unconventional ways (like this).

So, yes, there are good reasons to omit a traditional, top-of-the-page navigation menu; the navigation type should always depend on what best suites your needs.


It very much depends on how your site is built.

If for example you have a lot of sections/categories and in the typical scenario a user has to move around a lot between them, you'll probably need a navigation scheme which is always available on every page and section.

However if you don't have many sections, or they aren't arranged deeply - i.e. no inner nesting and you can get to each directly from the main/home page, you might be able to omit the bar. Just provide a way to quickly get to "home" and make sure your breadcrumbs show the location.

As a matter of fact, if you use the bar for navigation only, you might be able to replace it with carefully built (even interactive) breadcrumbs.

  • 2
    This would apply to Wiki sites too where the links are in-context in the page body.
    – Susan R
    Aug 26, 2010 at 18:42

When user scrolls down (to bottom of the page) for various reasons (like going through content etc), its good to have bottom navigation bar instead of top navigation bar.


Here are some options.

  1. a horizontal top nav bar can be almost any size so if you were to size the tags even twice the size of say a 12px font you will have a very small nav bar. Since most people currently use at least 768px high screens that isn't much.

  2. Placing it at the top and giving it a fixed position means it is always available no matter how long the content scrolls.

  3. If you are NOT using bootstrap css, then create a separate navbar.css and include commented html you can cut and paste in any application to make a quick navbar.

If you want other options for sidebar nav, you may want to use a JS collapsing side bar which has one long, thin side tab, which pops out when clicked. It is the same principle as drop down, but sideways. It will give you the maximum screen real estate possible. That too can be made modular even if you do use bootstrap or something similar, you just need to name your div IDs and classes something not already taken.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.