Analysis: What Links Appear in the Web’s Best Navigation Bars?

One of the first things you do upon starting a new blog is create a navigation bar or menu. But what links should go in there? And, more importantly, do some links outperform others?

I have spent a bit of time playing around with this myself and have been quite surprised at what works and what doesn’t.

It is interesting to note that the “traditional” five links that almost everyone includes up the top actually aren’t always best.

Let’s have a look at what some websites are doing with their navigation bars and what lessons we can take away for our own.

The traditional navigation bar

Since the beginning of websites people have been putting the same five links in the navigation bars: Home, About, Services, News/Blog, Contact.

And that’s fine.

But it’s definitely not perfect.

These days there’s so much more we can be doing with that premium website real estate. It is not longer just a place to navigate around the main sections – it’s a place that can respond to different visitors, change for various platforms, display photos, etc.

We could be a bit more creative.

Some excellent navigation bars from around the web

Let’s start by taking a look at some of the best navigation bars that I could find and then finish off with some ideas, resources and a plan of attack for your own.

1. Airbnb – menu responds to login status and interactions

The first example is from Airbnb which has a great top navigation bar that shows different information based on whether you’re logged in, or whether you’ve made any bookings, saves, etc.

The Airbnb menu allows for changed features depending on login status.

This is a really cool advanced feature that could be implemented in various ways depending on what content you want people to notice most at your website or blog.

For example, you might have a little section in your menu that shows people their saved articles or items they’ve interacted with multiple times. You could even have a section that shows popular articles right now and allows people to vote them up or share them on social media. Maybe there’s a plugin idea in that?

2. Smart Passive Income – animated features

The next example comes from Smart Passive Income where Pat draws attention to his monthly income by using a very neat animated graph that grows as the page loads.

A menu feature that changes as the page loads.

This is a really clever way to highlight one of the most important areas of your website. Pat uses his income reports as a real brand builder and as inspiration for people wanting to make a passive income online, and adding a prominent feature like this would go a long way to drawing readers deeper, promoting other areas of the site, affiliates, etc.

The interesting part is, because Pat is Pat, he is constantly testing the performance of his setup. I noticed this tweet about his navigation bar a few days after I started researching and writing this article.

3. Starlight – graphics and branding within the navigation bar

The children’s charity Starlight has really incorporated their branding into their menu well. As you can see, their are beautiful little illustrations that liven up the menu and make it more interesting and engaging.

A menu feature that changes as the page loads.

One other feature about this menu that I quite like is how the rest of the website darkens so that the focus remains on the menu itself – sort of like a lightbox. This also helps to draw attention to the three yellow buttons which are perhaps the main items, as opposed to just navigation.

Navigation bars and menus don’t just have to be plain areas. We can incorporate branding and design elements in order to make the site more memorable and distinctive.

4. Treasury of Lives – timeline doubling as a navigation menu

I wanted to include this example because it shows that a navigation bar does not even have to appear as a traditional navigation bar at all. The website Treasury of Lives collects biographies of Himalayan Buddhist teachers and as such it’s useful to show the era that they were around in relation to each other.

An interactive way to navigate around a website.

If you visit the site you’ll notice that they do use a traditional navigation bar, but I was thinking about how there would be some cases where it would be very unique to use this type of timeline style to function as the primary way to move around the site.

Of course, you don’t have to have a long history to make use of this format. I was thinking, for example, of doing something similar in terms of a blog’s progression and the stages at which you should install a plugin, add a theme, tweak this, change that, etc.

5. Google Fonts – space-saving menu

Google usually does things pretty well (sorry Google Wave, yuck) and at Google Fonts you get a great example of a menu that saves a lot of space by not really being visible until you decide to interact further with the content.

The main menu features are not available until you click the arrow.

I like this option because it leaves the emphasis on the content itself – especially given that their content on this site is interactive. Having a sidebar that allows you to change the way content is displayed can sometimes be gimmicky (I don’t think changing background colors is that useful), but other times it can be a really good way to enhance what is available.

So, what should I put in my navigation bar?

After all of that you might be wondering about what in the heck to put in your navigation bar!

Well, the good news is that it doesn’t really matter – there are no hard and fast rules.

The bad news is that the only way to find out the ideal combination is to do some testing – and that can take time. Sites like Visual Website Optimizer can help you out.

Being strategic with your choice

One thing you want to do is think carefully about which specific content/page you want visitors to find easily and then build your navigation bar around that, removing everything extra.

Remember, you know your content better than your readers and as such you should help them find the right stuff. That’s part of this blogging strategy.

For example, I’m currently testing a scroll-activated button on the top right that can send people to different pages that I want to target. I’ve even removed things like Contact from my menu and put it in the footer because emails are not a priority for me and take up a lot of time.

Being helpful with your choice

The next thing you might want to consider is how best to serve your readers in the particular niche that you are in.

For example, if you are an online store it might be better to have a huge mega-menu with all the categories, styles of product, shipping options, etc. available so that the entire online shop is accessible within on or two clicks. Etsy is an example of this done well.

With more complicated menus you need to be sure that it still works smoothly on mobile and for users of different screen sizes so as to avoid any confusion. Sometimes a mega-menu on mobile will add a lot of clicks.

Being distinctive with your choice

The last option I want to talk about is the idea of just doing whatever works for your brand and will help it to stand out from the crowd.

If your blog has a short bio of you in the sidebar on every page then maybe you don’t need to link to an About page in the navigation bar. Or, if your logo acts as a home button then don’t take up space with another Home link. Or, if your services is a little bit more complicated than most think about putting a Get Started or Take it for a Spin page.

This type of thing might also include using icons (like this) instead of text links as a way to quickly communicate what that page is going to do for readers. Conversely, an icon might be deliberately confusing as a way to generate interest in the mind of the visitor.

What is in your navigation bar?

I’ve left this article quite open ended as I genuinely think the best way to determine what goes in a navigation bar is to test it for each individual blog or website that you run and see what works.

That being said, I’d love to know what is in your menu, how you decided on those links, and how they’ve been working out for you. Please leave a comment below and let me know.