10 stunning web navigation menus
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.
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.
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
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.
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
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.
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.
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
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.
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.
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?