WEBSITE DESIGN GUIDE - BUILDING A BETTER, MORE INTUITIVE MAIN NAVIGATION BAR

Carefully consider what your navigation bar contains, where it is positioned and how it functions, as these decisions will have a major bearing on the experience of your visitors.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

The main navigation bar is an element on a website that contains links to other important pages. It is typically found at the very top, or to the left, of the page.

It is a lot like the central aisle in a supermarket. This aisle is highly prominent and easy to find, and from it you can clearly see all the other aisles and where you need to go next. Without it, getting around the supermarket would be chaotic and you’d be forced to explore each individual aisle sequentially until you found what is was you were looking for. 

A website’s main navigation bar serves the same purpose, and holds the same importance - just imagine what it would be like to explore a website without one. Many websites might still have a search bar, but successful usage of that would be predicated on knowing exactly what you were looking for, which many visitors wouldn’t.

Despite its importance, the navigation bar itself gets far less attention, consideration and scrutiny than it deserves. Even slight optimisations to it can have a significant impact on how easy it is to navigate a site and, by extension, how enjoyable and hassle-free a site feels to explore.

The previous guide on some general principles of effective navigation. This guide will cover three main aspects of navigation bar design:

  • What the bar should contain.

  • Where the bar should be positioned.

  • The mechanics of how the bar can work.

 

2. THE CONTENTS OF THE NAVIGATION BAR

Return to contents

Designing a navigational hierarchy

The first, and potentially most important, decision to make is what goes into the bar. This might sound like it should be quite straightforward, but it actually requires you to consider the entire navigational structure you want to establish.

 

To get this right, you need to have a good grasp of the content you have on your website. Start by mapping it out - what pages do you have, what is on those pages, who is visiting them and why? This exercise can be done digitally or using a pen and paper - so long as it helps you visualise the content you’re going to need to organise.

Ultimately, what we’re looking to do is come up with some sensible high-level groupings as a way to start organising the content on your site. This is no different to how supermarket departments would be designed, for example with all the fruit and veg, bakery items or household items grouped together in the same parts of the store. These initial groupings form the very top of your navigational hierarchy, and as such, are what will be shown to visitors in the main navigation bar. Best practice dictates that this high-level grouping should contain no more than seven items, ensuring the very first navigational decision a visitor has to make is simple and quick, and that the bar itself can (at least initially) remain uncluttered.

When you’re doing this, always try and align your groupings with the journeys your visitors are on, and the jobs they’re looking to achieve. This will help your navigation feel more instinctive and effortless to the visitor. To demonstrate this, consider the below examples for a gifting website:

The system on the top is perfectly valid, but I’d argue that the one on the bottom better aligns with how the visitor is looking to shop as they will have a clearer idea of who they are buying for than the type of gift they want to buy. This makes their initial decision on which page to visit that much easier.

For some websites, this first navigational layer is as far as they’ll need to go. For example, if our gifting website only had 100 products on it, then it could feasibly have a page for each of the different top-level menu items and the site would work perfectly well. However, most gifting websites will have a lot more products than this, and so this system needs to get a bit more nuanced to help visitors understand everything on offer. It needs a second navigational layer.

Let’s now have a think about fashion websites. The top navigational layer might look like this:

This is a good start, but it clearly doesn’t go far enough - linking to all of the clothes for women would be a nightmare. It also wouldn’t fully align with the visitors’ journeys as many of them are likely to be visiting with a specific product category in mind. A sensible (but obviously not exhaustive) second level might then look like this:

In truth, there is at least one more level you could go to. For example, a man looking to buy a shirt might well be visiting to buy either a casual or formal shirt. This is represented below:

You’ll notice that this is starting to look complicated, so a decision needs to be made about how much of this information to include within the navigation bar itself, and how much requires the visitor to click through to another page (for example, the men’s shirts page) before being able to refine the products even further. Doing so is a bit of a balancing act - we want to reduce the number of clicks someone needs to make to find what they want, but we also want to give visitors quick and simple decisions to make. Forcing them to read through a whole bar of links to this third navigational layer would be asking a lot of them.

In reality, most fashion retailers tend to show all three layers in their navigation bar. This is because, although showing a lot of menu items does demand the visitor read and evaluate a lot of options, familiarity with the category is high. Visitors typically have the experience to know how fashion websites organise their products, and so will often know to look for that third level. Sites where the visitor has less category familiarity will likely want to stop at the second, or even first, navigational layer to avoid confusing and overwhelming their visitors. 

These examples have been drawn from transactional websites, but the same principles hold true for sites of all other types. One key difference, however, is that other types of sites tend to have less complex navigational structures because they are often simpler and smaller. Despite this, they still have to consider the content they are offering, map out an appropriate navigational structure and translate this into the main navigation bar. The below examples show how this might look for a brochure website for a freelance photographer and a news site:

Menu bar language

Once you’ve decided on a viable navigation bar hierarchy, you need to find the best language to communicate what’s on offer. 

  • Use simple language. Having anything technical in the navigation bar is likely to scare off your visitors, unless you are dealing with a category where everyone has the same high level of base knowledge. Brand names, unless they are ubiquitous with your category, should be avoided for this reason.

  • Keep the wording concise. The fewer words you can use (without losing meaning) the better, as this will help keep your bar clutter-free and look more accessible. In practical terms this also means it can take up less room on the page.

  • Follow wording conventions. You’ve visited lots of websites and so will have seen lots of different navigation bars. You’ll notice common items appearing in many of them - for example ‘contact’ and ‘support’. Sticking to these commonly used terms, rather than inventing your own (eg ‘write to us’ or ‘seek help’) will make things easier for everyone.

 

Position of navigation bar items

The next thing to work out is the order in which to position your bar items. Typically, people read from left to right which means the most important items (representing the most frequent or high-value visitor journeys) should be on the left-hand side of the page. However, we know we can’t rely on visitors to read everything in a perfect order, and that they often skim read. This means that items on the far right-hand side of the list also enjoy quite a lot of visibility (as visitors skip over to them), meaning you should make good use of that space too. 

Your bar items should also flow in a sensible order. Regardless of the importance of the menswear department, we’d still expect to see a fashion website’s navigation bar look more like the bottom example than the top:

Including images in the navigation bar

You may well have come across navigation bars which have images within them. As always, every site is different but typically, unless there is really good rationale for doing so, I’m of the belief that images should be avoided. This is because your bar represents prime real estate and, as such, every element needs to justify its inclusion. Its primary purpose is to help the visitor get around the site easier so if including an image serves that goal better than text on its own would, then it might be worthwhile. If not, for example if the images were being used purely to add visual interest, then I’d leave them out.

The use of icons might be slightly more permissible, but it’s unlikely that you’re going to have an instantly recognisable icon to represent every menu item. Again, unless including them genuinely adds value and helps the visitor navigate, then avoid their use.

 

Content in the footer

As part of your decision of what to include in your navigation bar, you are also naturally forced to think about what to exclude. This can be difficult as there are still likely to be important parts of your site that you’d like your visitors to be able to find, but not quite important enough to justify putting links to them front and centre on every page. So where should these go?

At the bottom of each of your pages there is room for a footer, and this gives you the opportunity to link to content that didn’t quite make the cut in the main bar. In fact, there are links that your visitors would actively expect to see in your footer and will consciously go there to find them. These include:

  • Contact information.

  • Help and support.

  • Site map.

  • Social media links.

  • Privacy policy/terms of use.

 

However, this space shouldn’t be regarded purely as overspill. There is evidence to suggest that optimising your footer really can have a commercial impact. Nowadays, it’s quite common to include the same links as the main navigation bar there too, just in case the visitor missed them the first time around. This can lead to what is known as a ‘fat footer’ - a large space that, in practice, acts as a condensed index or site map. As not everyone will scroll to your footer, and as it’s tucked out of the way at the bottom of the page, it’s unlikely to distract visitors, so there is less pressure to keep things as concise or refined as in your main navigation bar.

 

3. THE POSITION OF THE NAVIGATION BAR

Return to contents

Once you’ve decided what’s going into your bar, you need to decide where to position it. There are two main decisions to make here: 

  1. What format it is going to take - is it going to be a horizontal, vertical or a ‘hamburger’ navigation bar?

  2. Is it going to be fixed or ‘sticky’?

Horizontal vs vertical vs hamburger navigation bar

There are three common positions/types of navigation bar you can choose from: 

  1. Horizontal - a short and wide bar that goes across the width of the top of your page, often spanning all of it.

  2. Vertical - a narrow but tall bar that takes up a proportion of the left-hand (or less commonly, right-hand) side of your page. It might be fully contained above the fold or continue below it.

  3. Hamburger bar - an icon made up of three horizontal lines, found in the top left or top right of the page, which then expands out to show a (typically vertical) navigation bar.

Website design change over time, and the navigation bar offers a good example of this. In the earlier days of the internet, the vertical navigation bar was much preferred, but the tide of opinion has now shifted to favour the horizontal bar. One practical reason for this is that the horizontal bar is much easier to develop in a way that responds to differing screen sizes and resolutions. With the surge in mobile browsing over the last 10 years, and the increasingly varied screen sizes that visitors are using, this benefit has become more and more important.

It’s up to you to decide what is right for your site. However, unless you have good reason not to, I’d strongly recommend using a horizontal bar. There are a number of reasons for this:

  • The width of a page is finite and this forces you to make more deliberate decisions about what to include in the bar, leading to simpler and better thought-out navigation for the visitor. One of the ‘benefits’ of the vertical bar is that the height of a page is infinite, so lots of different elements can be added to it (which is, of course, bad design and should be avoided). If you are opting for a vertical bar, challenge yourself to keep it as short and concise as you would have to if its space was significantly more restricted.

  • Horizontal bars better align with how visitors naturally browse and read websites. Our eyes tend to go to the top of the page (partially because of the popularity of horizontal bars) and we then read across. If choosing a vertical bar, the look and design of it needs to be even stronger to stand out and catch your visitor’s eye.

  • They take up less space on the page. The space to the left or right of the horizontal bar (if it exists) is not going to be used for anything, and the rest of the space below the bar is up for grabs. The space below a vertical bar tends not to get used even when the bar is scrolled past, so it eats into the available space on the page. 

  • If needing to display a second navigational layer, drop down menus are easier to use than fly-out menus. I’ll cover this in more detail later in this guide.

  • Horizontal bars are more responsive to changes in screen size and device type. This is incredibly important for mobile browsing.

I’m personally not a fan of hamburger menus. These are a popular, and very necessary, navigational tool for mobile sites, but the number of desktop sites that are using them has increased in recent times as well. Their main downside is that they require a click before the navigation options are even visible. For less savvy visitors who don’t know to look for the hamburger icon, or for those who are in a rush and skimming the page, it might well get missed altogether.

Of course, they wouldn’t be used at all if they didn’t offer some advantages. Advocates will say that they save space on the page which can benefit sites that are looking to have a strong visual impact. A navigation bar is typically very functional in its visual design, and takes up a good chunk of the page, so is often at odds with that goal. They’ll also say that it’s beneficial to have a consistent navigation style across all devices, and, with hamburgers offering significant benefit on mobile sites, they should be used on the desktop site too. Although consistency in navigation is often desirable, not all sites will benefit from it to the same degree. If a visitor is not going to be browsing your site across multiple devices then it doesn’t matter if the pages look slightly different across the different site versions. I’d also argue that having a weaker navigation system for desktop visitors, simply to promote consistency, is detrimental rather than beneficial.

 

Fixed vs sticky navigation bars

You also have options around how the navigation bar behaves when visitors scroll up and down the page. Here, there are two choices:

  1. Fixed - as a visitor scrolls down the page the bar disappears from view.

  2. Sticky (or ‘floating’) - when the visitor scrolls down the page the bar moves with them, remaining in the same relative position throughout (a bit like a freeze pane in Excel). 

Sticky bars have risen in popularity in recent years and now feature in many modern websites. On balance, I think using them is the right decision for most sites, but as with everything they have both pros and cons:

 

Pros of sticky bars:

  • It saves the visitor from having to waste time scrolling back to the top of the page when they want to move to a different page.

  • It keeps all navigation options visible to visitors at all times. If they are assessing a page and wondering if they’re at the right place, they can easily see the alternatives available to them.

  • It keeps your branding (your name and logo) prominent, helping to raise brand awareness.

 

Cons of sticky bars:

  • Having the bar retain its position can feel a little distracting. When most visitors scroll down a page they still typically expect the elements they can currently see to disappear.

  • It means your menu will always take up space on the page. If it’s tall or wide, this might be a major issue (although there are also ways to collapse down the navigation bar to a smaller, secondary form).

  • Sometimes it’s just not necessary. If the site itself isn’t complex, or if its pages aren’t too long, then it will probably add little benefit.

  • Its functionality can be replicated through other, often simpler, mechanics such as ‘scroll to top’ buttons.

 

4. THE MECHANICS OF THE NAVIGATION BAR

Return to contents

Finally, once you’ve decided what is going to go in your navigation bar, and you’ve decided where on the page it’s going to be positioned, there are a few more technical decisions that need to be made. These are:

  1. How is the visitor going to be able to access your lower navigational layers (if you have any)?

  2. How is the visitor going to be shown where on the site they currently are?

 

Accessing the lower navigational layers

If your navigational hierarchy is very simple and only consists of one layer then your visitors are likely to have an easy time navigating and you don’t need to worry about reading this sub-section. However, many sites are going to need secondary and, possibly even, tertiary navigational layers to allow their visitors to access all the content available. There are several ways that this can be handled:

  • Build a landing page for each top-level navigational item that then links to pages at the next level. For example, having a specific page for womenswear, menswear and kidswear that then links to all the different types of clothing sold within those categories.

  • Display the secondary level on your navigation bar at all times. For example, the bar would always show links to shirts, jeans, jumpers under the menswear menu item.

  • Design a navigation bar that hides the lower levels until your visitor indicates they wish to be shown them. The visitor can either click on a bar item or hover over it, and the bar will then expand to show the second level down.

This final route is by far the most popular and common method of handling this problem as it strikes the best balance between speed of navigation, required effort from the user and space taken up on the page. There are a couple of specific options available to achieve this:

  1. Click functionality. Clicking a top-level navigational element will then load the second level on the same page.

  2. Hover functionality. Moving the cursor over a higher-level navigational element will then reveal the next level in the navigation bar on the same page.

 

Preference has now largely shifted away from hover functionality towards drop-down functionality. Again, the rise of mobile visitation has influenced this decision as you can’t hover on mobile. There are also usability issues with hover menus so it’s easy to see why many feel strongly against using them.

If you’re ever in doubt about which one to pick then play it safe and go for the drop-down functionality. However, to properly evaluate which one is right for you and your site, then there are a number of factors to consider:

  • Who is visiting your site? Navigating through menus requires fine mouse/cursor precision and some groups are better at this than others. If you suspect your audience is quite technical (for example, if you run a PC gaming news site) then they are likely to be highly comfortable with hover functionality. If you suspect that a large proportion of your visitor base has accessibility problems (for example, problems with sight or fine motor skills) then a drop-down will be the more appropriate path to take.

  • How complex is your menu and how many items are in it? The simpler it is, the less precise mouse placement will be required. Will your visitor need to look through multiple menus to get to the right place, or will they get their top-level selection right first time? If the former, then a hover menu might be better (it’ll be quicker to jump from one top-level element to the next), if the latter then a drop-down menu will be better.

  • How big a space is your bar taking up? If it’s large then it’ll be easier to hover to the right individual item.

  • How familiar are visitors with your site? Do you get a lot of repeat visitation, meaning your visitors will be familiar with how to navigate? If so then they might prefer to save clicks and enjoy the speed that hover navigation can offer.

  • Where on the page is your bar positioned? Earlier, I referenced drop-downs and fly-outs. They both achieve the same thing but drop-downs emerge from horizontal bars and fly-outs emerge from vertical ones. It’s much quicker and easier to move your cursor directly down a page than across it (if you don’t believe me then try it next time you’re using a mouse), so hover menus will, by extension, be easier to navigate on horizontal menu bars.

 

Indicating where on your site the visitor currently is (using breadcrumbs)

In web design, a ‘breadcrumb’ refers to a graphical element that helps visitors keep track of where they are on a website. This is most commonly represented by changes in how the main navigation bar looks. 

This is a really useful functionality to implement as it means that a visitor is less likely to accidentally navigate themselves back to the page they are currently on, ultimately saving them time and hassle. It also helps them correct their navigational choice quicker than if it weren’t available as they can more immediately see what page they’ve landed on. There are a few different ways to implement breadcrumbs, and the decision often comes down to style and design preferences. Below are some examples of how you can do it:

  1. Changing text colour.

  2. Bolding or underlining text.

  3. Block-highlighting the navigational item.

  4. Showing the user their path to that page.

Whatever you implement, there are a few key principles for doing it effectively:

  • Keep things consistent. Don’t chop and change on different parts of the site.

  • Don’t make breadcrumbs too prominent. They should subtly aid the visitor and their journey, not distract from it.

  • If using path-based breadcrumbs (example four above) then keep your breadcrumb titles consistent with your navigational items and ensure the path starts at the highest level and ends on the lowest level (the page they are currently on).

 

5. CHECKLIST

Return to contents

  1. Make sure you have a thorough understanding of the content on your site in order to develop the optimal navigational hierarchy.

  2. Design your navigational structure by sensibly grouping similar content in a way that aligns with visitors’ journeys and gives them only simple decisions to make.

  3. Ensure the top level of your navigational hierarchy (and hence, your main navigation bar) contains a maximum of seven items.

  4. Keep language in your navigation bar concise, simple and easily recognisable.

  5. Position your most important navigational elements to the left (or top) of your bar.

  6. Ensure the items in your bar follow a logical order.

  7. Only use images and icons in your navigation bar if they genuinely make it easier for the visitor to get around.

  8. Use the footer of each page to link to less important parts of your site and to re-iterate visitors’ navigational choices.

  9. Use a horizontal navigation bar unless you have a good reason for using a different style.

  10. If your navigation bar or site structure is complex then use a ‘sticky’ bar.

  11. Assess the suitability of drop-down vs. hover navigation bar mechanics by considering who visits your site and the complexity of your navigation hierarchy.

  12. Use breadcrumbs consistently and subtly to help visitors understand where they are on the site.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.