Different types of website navigation menu and their uses

Intuitive and consistent navigation is a crucial part of any website design. Even the prettiest, slickest website will fail if users are unable to find their way to the information they seek, and a well-organised, clearly presented website navigation menu is the key to getting them where they want to go, for example to the page where they buy your stuff!

Web design is an area that changes constantly, with new technologies and new design trends appearing on a regular basis. There are however a few basic types of website navigation menu that will cover the majority of website structures, and a good web designer will know when to use each type of menu to best effect.

Vertical website navigation menu examples

Vertical navigation menus were used on a lot of older sites, before horizontal menus worked reliably in all browsers, and a lot of designers nowadays don't even consider them due to horizontal menus being more "hip". This is a shame since vertical menus can look just as good as horizontal ones when designed properly. They're easy to use and will hold an almost unlimited amout of links, though if your link structure is large you may want to consider a flyout submenu too. 

Vertical navigation menu

Horizontal website navigation menu examples

Horizontal navigation menu 2

Horizontal menus are probably the most popular type of website navigation menu: they're great space savers and just look plain stylish. The main downside of this type of menu is that the number of links that can physically fit in one horizontal line is limited, but if your site is small and only has 5 pages or so (typical small business site) this isn't a problem. If your site is larger with a lot of pages and you want to stick to a horizontal menu design, you're going to need some sort of dropdown.

Horizontal navigation menuOften, to keep a horizontal menu without resorting to dropdowns, a designer will include only the most important links in the main menu and include a secondary menu with more links elsewhere on the page. This is a common use for the footer, as here on InfoBarrel.

Horizontal menu with searchbox

One final advantage of a horizontal menu is that they often provide extra space in which to include a feature such as a search box, saving space elsewhere on the page.

Dropdown & flyout website navigation menu examples

Horizontal dropdown menu

Dropdown and flyout are basically two words for the same idea. Whatever the orientation of your menu, if you have too many links to fit and still work well it's time to get into submenus.

Dropdowns and flyouts work by grouping links together into submenus which appear once the main link is hovered over (or sometimes clicked). In a dropdown the submenus are vertical, and in a flyout they're horizontal. You can even have sub-submenus, so the first drops down and the second flies out or vice versa.

Dropdown and flyout menus

One notable alternative to these is an accordion style menu, which displays extra links on click/hover without expanding the width of a vertical menu.

Vertical accordion menu

Mega-dropdown website navigation menu examples

Some people find regular dropdowns difficult to use, and they can only hold so many links before you'll need to start adding flyouts and generally having a ridiculous mess of menus all over your page (which, annoyingly, will all disappear if the user accidentally moves their mouse the wrong way). Mega-dropdowns could be the answer here.

A mega dropdown functions in much the same way as a regular dropdown, except when hovering over the main link a large "box" appears instead of a normal dropdown menu.  Your submenu links are displayed inside this box, often split into groups with their own headings or using icons to communicate what that link leads to, and wherever the user's mouse may roam within the box it will stay put.

As well as handling large numbers of links, mega-dropdown menus can hold images and other more complex content too.

Mega-dropdown navigation menus

These menus are great for usability but not really needed if you only have a small number of links in your submenu. Experiment, your mileage may vary.

Secondary website navigation menus - Breadcrumbs

Breadcrumb navigation

Breadcrumbs are an excellent addition to the main website navigation in any situation where content is nested more than one level deep, or the user is partway through a series of steps.

For example the structure Home > About does not really require breadcrumbs, whereas Home > Articles > Design > The Importance of Whitespace would benefit from having an easy way to backtrack to both the "design" category and the "articles" page as well as the homepage.

An order form or questionnaire consisting of multiple steps will also benefit from breadcrumbs, allowing the user to skip back to a previous step whenever they choose.

Breadcrumbs are generally horizontal, and located just above the main page content such as a blog post.

Notes on navigation menu usability

It's always a good idea to make your navigation as easy to use as possible. From a designer's perspective this means giving each link enough of an area that it's easy for most users to click on without having to concentrate on "aiming", especially if you're using dropdowns or flyouts (or both!). It also means the navigation should look like navigation, so it's easy to find.

I know it's tempting to try and create and entirely new form of navigation and name it after yourself, thus gaining immortality, but design is not art and your priority should be to cater to your users. Over time, we've become accustomed to certain navigation styles and placement and going against these expectations can result in a confusing website.

Above all, the choice of which type of website navigation menu to use should be based on the requirements of the site. You may like the look of a dropdown menu, but on a site with only five pages a dropdown could be silly. Plan the structure of the site first, and choose whichever menu type is most appropriate!