12 Ways to Design the Perfect Site Navigation

Header navigation menus can often be overlooked when it comes to inventive and creative web design. But as the primary way users explore and interact with your website, investing in engaging header navigation means site visitors spend more time on your site and end up seeing much more than just your landing page. There’s no point having brilliant web design on your inner pages if your header doesn’t make it easy (and fun) to click through to it.

So we’ve put together a roundup of websites which have made the most of their navigation menus with beautiful, sleek, and innovative design. Take a look below and get inspired!

1. SISTRIX

Sistrix is the German company behind popular SEO software package Sistrix Toolbox. As such, their website (including their popular SEO news blog) gets regular traffic from digital experts. When that’s your target market, there isn’t much room for sloppiness when it comes to web design.

Keeping things sleek and stylish, the Sistrix navigation menu is comprised of four simple drop down menus: Toolbox, Blog, Resources and Support. Hovering over each header reveals a list of relevant links, each represented by a simple icon. This is a particularly smart idea when your website has as many pages as Sistrix’s has.

Just showing a block of text can be overwhelming when trying to navigate through a big website, but these well-designed icons quickly direct the visitor to where they need to go. Looking for help with mobile SEO? A simple smartphone icon draws the eye and gets you there much quicker. Streamlining the user experience for site visitors is one of the main functions of a good navigation header, and this is something the Sistrix site nails.

2. SUPPLE

One of the key services offered by Australian digital marketing company Supple is their web design makeovers. This means that having a good navigation menu on their own is as much about demonstrating their design prowess as it is about helping visitors navigate their services. One of the key things that helps Supple’s header navigation stand out is the simple, yet eye-catching, use of animation and colour.

For example, their phone number is represented with a colourful animation that cycles between orange and black text. Beyond simply helping site visitors know what number to dial to get in touch, it adds a dynamic flair to the navigation menu.

Other eye-catching uses of animation is the hover effect on the navigation menu to expand the text like what >> what we do, how >> how we do it, etc. It’s small touches like this which make navigating the site fun, meaning visitors are likely to spend more time browsing through multiple pages.

3. REISS

When you’re a fashion brand, it’s smart to show off your latest designs as much as possible. While many drop-down navigation menus are purely text-based, UK fashion brand Reiss highlights their New Arrivals catalogue using images in the drop-downs for womenswear and menswear, two of their core product categories. It helps that they’ve invested in high-quality photography—with pictures that look this great, why not incorporate them as a key part of the navigation experience?

4. VIBRAINS

Vibrains is a portfolio for Emiliano Borzelli, a front end developer. When it comes to the site, it’s truly out of this world. Picking a clear design motif like ‘space’ gives a cohesive look to the whole site. Everything from the logo design to the key info icons utilise space imagery. A simply animated banner makes browsing the site feel like floating in outer space, but the absolute standout design feature is a fully animated animation of the solar system when you jump into the process section.

With to-scale representations of our neighboring planets, it evokes the childlike fascination people have with space to keep visitors engaged with navigating through the site. If you’re as obsessed with this animation as we are, you’ll be glad to hear we tracked down the open source code for it on CodePen here!

5. WEECOM

Brazil-based digital agency Weecom utilise a hamburger-menu button to keep their homepage looking sleek and minimalist, with navigation options only popping up as you hover over the icon. It’s a pretty standard approach to navigation headers, but what we love about Weecom’s site is how scrolling down the page causes the hamburger icon to switch from top-left to bottom-right. It’s a simple, dynamic touch that proves how important it is to use navigation menus that work around the main content of the page.

6. MASHABLE

When you’re a content nexus like Mashable, it can be a tall order displaying all your content in a conventional navigation menu. Headings, subheadings, sub-subheadings—making sure you have clarity is key to providing a good user experience for your site visitors.

That’s where their mega-menu comes in. Once you hover over the ‘More’ tab a drop-down menu spanning the entire length of your screen becomes visible. This provides the space to include a series of columns—like ‘Channels’ or ‘Company’—under which your list of subheadings can be displayed. If you’re designing a site that’s hosting a lot of content, considering a mega-menu like this one is a strategic way to handle navigation.

7. OARS

Another example of a mega-menu, travel service Oars uses a clear navigation layout to help you find what you want. For example, hovering over Destinations showcases a mega-menu divided up into Oars’ local United States destinations, International destinations, National Parks and Rivers.

Another great addition to the mega-menu design is the use of images under Your Experience, Stories+Video and Plan+Reserve headers. Making the most of the space they have, these eye-catching image panels engage site visitors and encourage click-through.

8. PAPER COLLECTIVE

Specializing in stunning art prints for the home or office, it’s clear Paper Collectivehas an eye for good design. Accordingly, they’ve made clever use of a slide-out sidebar menu—meaning that navigating their site never obscures their homepage product images, but shifts them slightly to the right instead.

9. OLYMPICS

Maybe we’re design nerds, but one of our favourite parts about the Olympic Games is seeing the logo designs each host city comes up with. Completely individual to the culture and design sensibilities of the time, they’re a great way to look back on past Games.

This is something the navigation menu design for the IOC homepage seems mindful of—as you hover over the main ‘Olympic Games’ header each Olympic Games is represented alongside its specific logo. Laid out in a simple, streamlined way that makes navigation by chronology easy, this site sets a gold-standard for good menu design.

10. NEXT STOP

Next is a UK brand that sells everything from clothes to shoes, to flower arrangements, to furniture. As such, their navigation menu has to do a lot of heavy-lifting to display their comprehensive catalogue of products. One of the techniques they use is accordion tabs—when you hover over their Home & Furniture header you’ll see a sub-menu of tabs you can click through to see links for bedroom furniture, kitchen fittings and more! If your company has a wide range of products online, this method of dividing up headings, subheadings and sub-subheadings is a fantastic way to go.

11. ESPN

Smart navigation design means knowing what people are looking for and displaying that as easily as possible. For sporting media empire ESPN, most of their customer base are looking for one thing: the score.

With a keen awareness of this, ESPN has made the smart decision to display a Top Events navigation menu above their standard menu, giving quickview results for the latest scores in the most popular games. In combination with the standard menu (which utilises team logos under NBA, NFL, AFL, NRL & Cricket headers for easy browsing) it’s design that’s directly informed by how and why people use the ESPN site.

12. BENTLEY

Bentley is a brand which is held in high regard for their sleek car designs and, so it would seem, sleek web design too. A clever layout has made navigating the Bentley site a joy. Clicking the Models header in the top menu causes a sidebar to appear. As you hover over each car model range, you’re given a stylish sideview of the individual models on offer.

With a reputation for beautiful cars, it’s no surprise high-quality images feature so heavily in the Bentley navigation menu. It’s a lesson we can all learn when it comes to web design: if you’ve got it, flaunt it!