10 stunning web navigation menus

Barin Cristian Doru

A navigation menu can make or break a website, so it’s essential that you treat it with respect and design it with passion. But what makes a main menu great?

I believe the best way to learn is by example, so I’ve prepared an awesome list of navigation menus from all over the web. They range from extremely simple to very detailed, but what’s important is the context – they all perfectly fit the website’s atmosphere and design.

Let’s get started.

1. Unsplash

Great navigation menu: Unsplash

This is as simple as it gets – and it’s a great example of a main menu. The whole point of Unsplash is to showcase amazing photography without any distractions. For this reason they use lots of white space and minimal design to match the website’s overall feeling.

That’s a mission accomplished.

2. Light & Shadows

Great navigation menu: Light and Shadows

This is another simple menu, but it features some nice details. The sans-serif font up top is in all caps, but due to it’s small size and faded light grey color it exudes elegance. Furthermore, the items are actually doubled in the hero area making the main menu less important in the overall structure of the site.

3. CHEF S

Great navigation menu: CHEF S

CHEF S’ menu is hidden away in the upper-right corner, but when you click it the navigation expands across the entire screen. This has an in-your-face impact (the bold color doesn’t hurt either) that is balanced by a semi-opaque background and lovely sans-serif font.

4. Edinburgh Zoo

Great navigation menu: Edinburgh Zoo

Edinburgh Zoo’s website is an example of how you should structure a navigation that requires loads of submenus. We start from the top with an all-caps, sans-serif font that sits on top of a skewed beige background and features the less important menu items.

Underneath we have a simple menu that uses a serif font that’s separated into key categories. On hover, we can see each of these expand into a sleek looking drop-down.

A+ all around.

5. Scotch & Soda

Great navigation menu: Scotch and Soda

Can you guess, just by looking at this main menu (and without reading any of the menu items) what this website’s all about? Yep, it’s a fashion website.

This is a classic example that’s still in style and very much used throughout upscale fashion. It uses a serif, all caps font, generous proportions and adequate spacing. The contrast is set to max: white on black. All these elements make this niche very easy to recognize, before you’ve even explored the site.

6. Draught Master

Great navigation menu: Draught Master

Draught Master has an interesting approach to its navigation system. You don’t actually see the menu items until you hover over them. While this isn’t optimal for most sites, it works great for them. I actually went through each and everyone of them just so I could experience the entire site.

It’s enticing. It draws you in. Again, this may not work everywhere, but Draught Master pulled it off.

7. Hyperakt

Great navigation menu: Hyperakt

This is a very app-inspired navigation system. It’s hidden under a menu icon in the top right of the screen and, upon clicking, it expands to the right of it.

It’s beautiful in every way because it follow the basic guidelines of every menu: clear font, great contrast, adequate spacing, easy to use. Not everyone is going to love the fact that it’s hidden, but we can let that slide because of its appearance.

8. OK Kid

Great navigation menu: OK Kid

This is a very contemporary navigation menu. It’s situated dead in the middle of the website’s grid and is very minimal, with links and active videos scattered around it.

Hover over the central navigation and you’ll notice that the font isn’t particularly great, nor is the overall design. But hover on the links surrounding it and you’re met with an interactive experience of crescendoing music, intriguing videos, and animated text.

The central navigation doesn’t need to boast – it’s just there to perform its role. Very interesting approach.

9. Belgacom

Great navigation menu: Belgacom

Classic vertical menu paired with colors to mark each category. A great example of how you can visually guide a user with color. Vertical menus have lost serious ground over the years, but menus like Belgacom’s show us that they still have fight in them.

10. Hunger Games Exclusive

Great navigation menu: Hunger Games

This website features a very stylish vertical menu situated on the left site of the screen. You don’t get to see all menu items at once, but have to move through the site to find content. The addition of numbers helps guide you through the process and the fact that you can go through each “page” by scrolling helps the overall usability of it.

Again, not the type of menu you would want for every site – but for this particular type of content, it’s fantastic.

You’ve seen them all, from simple to complicated. Which navigation menu stands out to you?

The author

Barin Cristian Doru
Barin Cristian Doru

Barin Cristian Doru aka 'thislooksgreat' is an experienced web designer and proud member of the 99designs community: http://99designs.com/people/thislooksgreat Besides creating awesome website designs, he is also an entrepreneur, an Android App Developer and a content creator. His work ranges from freebie PSD files to small tips & tricks in Photoshop, all the way to a premium 16 hour long course on how to succeed on 99designs.

Tags

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%