Tips for Crafting Simple and Usable Website Navigation Menus

by Jake Rocheleau

February 23, 2014 in UI Design

Most designers would agree that it’s crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

website wireframe sketch user interface vimeo video page

In this article I’d like to share a few design tips for building usable website navigation. There are many differing styles like vertical/horizontal lists, dropdowns, sliding menus, and other related features. This guide covers more general ideas which you should be able to implement regardless of design style. Try to keep these ideas in mind whenever you’re creating a new website.

Organizing Links

Before sketching or designing anything you should try making a complete list of the website’s pages. Think about tiered links and which menu items should be seen first. There are lots of sub-navigation designs like collapsible menus, breadcrumbs, accordions, etc. Make your design style fit the proper context.

Some websites may only need 4-8 top-tier links because they only have 4-8 pages. Other sites might use 200+ different pages linked under parents and grandparents. It isn’t uncommon to find websites using sub-sub-links with expanded nav menus.

corporate risk watch website navigation layout

Make this step the planning ground for your initial design concept. How would your idea come off to any typical visitor? Is it easy to understand from a distance? Once you have a detailed list of links in the proper order you can try out different styles and see what fits best.

Distinguishing Importance

Ensure that your primary menu is within close proximity to the top of the page. Any other menus should be scattered throughout as needed. But navigation is almost the central piece to any website – without links people can’t browse!

carbonica sidebar menu links navigation

When finding a menu location you want to stay as consistent as possible. Make sure the primary navigation appears roughly in the same spot on every page. If a visitor already knows where to look then you’ve made their job a lot easier. It’s worth designing a unique color scheme or texture for the primary navigation so that it stands out from other links on the page.

Show Navigation Paths

When using sub-navigation it’s often a good idea to keep the parent link in a permanently selected CSS style. This way users know which navigation item is currently being viewed. This might not be necessary if the menu is very small. But this feature is beneficial to users in most circumstances.

If the project needs a lot of different pages then you might find value highlighting the current navigation link going down multiple sub-menus. You might also try breadcrumbs which may be coupled with the nav, or separately placed elsewhere on the page.

wufoo tour website breadcrumbs navigation ui

These are perfect to display a connection between parent and sibling pages. With some websites and eCommerce shops like Newegg visitors are allowed to search in different categories of merchandise. This can lead to a long breadcrumb trail of related links.

newegg breadcrumb list navigation menu design ui

But you may not need to use breadcrumbs or selected navigation items. The most important thing to remember is to somehow show the path and let visitors know how they got onto to the current page. Not always pertinent but good to keep in mind nonetheless.

Snazzy Designs

Don’t be afraid of trying new ideas. Creative page elements, including navigation, keep people interested and show off your true skill level. This is why it’s best to list your pages first and then design the menu to fit your exact page structure.

mouse to minx blue website layout inspiration

The Mouse to Minx website uses a highlighted hover effect which makes the text almost look handwritten. It’s cute and very simple to pull off, yet to anyone who doesn’t build websites it may come across as flashy or complicated(in a good way). You don’t see this highlighter effect on many websites and this gives more unique definition to the overall layout.

Those tiny little effects go a long way towards building respect from visitors. It doesn’t seem like much, but the challenge of rising from good to great is in the details. Study traditional navigation first and try throwing your ideas into the mix. Somewhere in the middle of practicality and creativity is a harmonious solution.

anet design homepage website navigation layout

Handling Mobile Users

One of the best pre-planning decisions you can make is building a fully-responsive website. This means constructing a layout which is fluid to expand or contract based on the browser’s width. Responsive navigation UI trends are always changing and you can learn a lot from examples.

If your responsive website uses a top heading bar you might toggle the navigation with a hamburger icon. But this link could also just read “Menu” and visitors will have the same reaction. Mobile phones are smaller than a monitor so you need to convey ideas quickly without much extra detail. Your extra design features should appear in the wider screen displays.

you know who design navigation menu ui

I like the example from You Know Who although it’s not perfect for every website. In fact it’s a very distinct example creating the iOS-styled tabbar within HTML/CSS. Thinking of your responsive website as if it were a mobile application might help you solve complicated interface problems.

Live Examples

To wrap up the article I’ve put together a gallery of website nav menus. If you need some cool ideas for new website layouts this article should get you started on the right track. Also if you know any other brilliant menu designs feel free to share links in the post discussion area.

College Park Church

college park church your design navigation dropdown

4 Pines Beer

four pines beer website navigation textured

CSS Tricks

css tricks navigation menu horizontal tabs

Bonarium

bonarium dropdown shop navigation menu design

Power to the Poster

power to the poster website navigation menu

Waterworks

water works website dark navigation ui

Formfett

formfett dark navigation menu design

Martique

martique breadcrumbs navigation ui design inspiration

Rockatee

rockatee design homepage navigation ui inspiration

Oliver Russell

oliver russell personal website portfolio navigation

MacAllan Ridge

macallan ridge website navigation ui design

Claire Baxter

claire baxter website navigation menu inspiring

Designsensory

design sensory website layout inspiration navigation

Starbucks

green starbucks navigation menu dropdown layout

le coq sportif

le coq sportif navigation menu dropdown

Philadelphia Orchestra

main website navigation philadelphia orchestra

One Mighty Roar

one mighty roar navigation menu fixed placement

Vertrauen erleben

german red white navigation menu design

Unyk TV

unyk tv television digital channel station website navigation

Luhse Tea

luhse tea website dark blue icons navigation setup

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

It's pretty quiet on this post. Why not share your thoughts?

Leave a Comment

Your email address will not be published. Required fields are marked *