Planning website navigation

Planning website navigation
7 February 2012 | | Creative Design

Navigation can be very simple, or very complex. It can be horizontal, or vertical. It can be static, or it can follow you as you scroll down a page. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.

Designing navigation is an art in itself, and as designers we become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”

The best navigation designs and structures will allow your site visitors to reach the content they want to see in the least amount of effort and clicks. If they cannot get to where they want to be within a maximum of two clicks, you risk losing their business completely.

Organizing Navigation Structure

Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.


You might assume that the primary and secondary navigations are marked in a wrong way on the image above, but I believe that this is not the case.

Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).

Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,” “Contribute,” “Advertise” and so on. For other websites, the links might be for the client area, FAQ or help page.

The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.

Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it? No matter how organized the content is, if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting.

Grouped Content: Classification Schemes

When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?

Below is a list of the most common content classification methods, along with suggestions for what each is best for:

  • Most recent to oldest
    Suitable for time-sensitive content.
  • Alphabetical
    Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.
  • Most popular or most used
    Great for interest-based browsing, rather than content that users need.
  • Geographical
    Is certain content irrelevant to certain regions or sub-regions?
  • In the order of the process
    If the content in some way represents a process (for example, “How to file your taxes”), then it could be organized according to the order of actions the user has to take.

Common Considerations

Navigation design is all about findability and usability. No matter how simple or complicated, navigation must work well for its users. Now we’ll look at some trends in navigation and how these designs might benefit or hinder websites.

Horizontal vs. Vertical

The decision of whether to make the navigation horizontal or vertical tends to be determined by the nature and focus of the website. Often, it’s a mix of both, but with primary navigation we see certain tendencies. Small websites often lean towards horizontal navigation at the top of the site, while large corporate websites often use both horizontal and vertical navigation (usually with drop-down menus). Blogs vary greatly; primary navigation (such as for categories or pages) is sometimes horizontal, while most of the other menus are vertical. On news website, the navigation is mixed, with no clear tendency either way.

A number of factors will influence the decision for horizontal or vertical navigation, including design, usability and density of content. Sometimes designers add icons to the navigation or add visual elements around it to make it better stand out. Rich typography is another common consideration: since the navigation is the most popular area of the website, it could be given a special typographic treatment to make the user experience a bit more distinctive and unique.

Amazon’s list of departments is much too long to go in a horizontal menu without looking crowded. Instead, across the top we find a search bar, which is a kind of navigation in itself. Many Amazon customers know exactly what they are looking for and so go to the search bar first; perhaps far more often than on other websites. Amazon puts its menu of departments along the left. Because the list is so long and varied, its purpose is chiefly for browsing; and vertical menus are good for browsing. The sub-menus, also vertical, help the user refine their browsing among departments and products.

While it is generally good practice to make simple primary menus horizontal, it’s not essential. Below are a few designs that use vertical menus for primary navigation, and pull it off. However, all of these websites have simple menus and fairly minimal design and content; websites with a lot of content could easily overpower vertical menus. Good/Corps (the first site below) is a nice example of how a quite large amount of information is presented in a very compact, even minimalistic way. Subsection are indented, providing users with a clear sense of hierarchy on the site.


Stura TU-Chemnitz

Baltic International Bank

Analogue Digital

Cambrian House



Debbie Millman

Of course, horizontal menus can work really well, too, and menus that follow best practices don’t have to be boring. In fact, combining horizontal and vertical menus is even a possibility.

Below is a small showcase of horizontal menus in action, at either the primary or secondary level.

Moody International

The Big Feastival

Web Standards Sherpa

Tijuana Flats

Cultural Solutions

Tinkering Monkey


Drop-Downs And Mega Drop-Downs

While horizontal menus are best for top-level navigation, larger websites often need more in-depth navigation. Drop-down menus can fit a lot of items in one space, thus saving valuable real estate and keeping the navigation organized. The hierarchy can be refined with sub-levels and even sub-levels of sub-levels, helping users filter the information to get to the page or section they want.

Even more useful are mega drop-downs, which can accommodate an even wider variety of content and layouts, but more importantly provider larger click areas for users. They can be used to better organize navigation, as well as contain more content while saving space. They are also a great place for additional features and otherwise non-essential content. In both cases it is important to clearly indicate that the drop-down menu is available, either by using arrows or icons or something else.

Below is a small showcase:


Estee Lauder

Portero Luxury

Sunglass Hut

See how some of these menus are creative in their organization of content and navigation. Below are a few points to note:

  • Much of the navigation the small showcase above is organized into categories and sub-categories.
  • Many of the websites have a different layout and style for each drop-down menu under each top-level link. This creates more variety and creates the appearance of sub-pages under the main page of a design.
  • Some of the websites have icons, images and regular text for link items; these elements could be used for promotion, navigation usability or simply organization.

These are just a few of the features in the drop-down designs above, but of course many more interesting solutions could be found. The point is that navigation is sometimes so extensive that sub-menus (whether via drop-downs or mega drop-downs) are necessary.


Navigation that is complex, whether because of content volume or membership considerations or something else, can add a lot of work to the design and development process. But with solid pre-planning and good organization, the work can be fairly easy. Organizing, designing and coding navigation can take many shapes, but there are definite trends to follow and resources to turn to for help at every stage.

Feel free to share other tips, examples and best practices related to complex navigation. There are probably many approaches to each stage of navigation development, and hearing about the practices and experiences of other designers and developers would be great.

Article courtesy of Smashing Magazine.

More posts from our team

Previous Post:
Next Post:

Back to all news

Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents