20 Distinctive Navigation Menu Designs

Gabrielle Gosha

Since its invention, the humble ‘navigation menu’ has been one of the core experiences of browsing the web. In fact, the Web’s first-ever webpage — recently restored to it’s original 1991 CERN URL — consists mostly of a rudimentary text navigation menu.

Tim Berners-Lee

‘Look. I made this for you..’ Tim Berners-Lee, 1991

As spartan as it appears, the reality is that the vast majority of webpages ever since have used some sort of variation on Sir Tim Berner-Lee’s original handiwork.

Navigation menus have taken on many different looks and functionality, showing that you can customize them to your liking in order to make your design cohesive.

Today’s showcase focuses on 20 attractive and original navigation menus for your 2014 design inspiration.

Enjoy.

Spark

Spark Design website

An already eye-catching website, the Spark website carries an overall sleek look that is also seen in their navigation menu. Foregoing the typical text menu Spark utilizes creative grey icons instead to match the site’s aesthetic.

• sparkdesign.cn

Captain Dash

Captain Dash homepage

There is nothing wrong with having a text-based menu but if you do go that route, why not try something different. Captain Dash takes the usual menu design and adds in not only ample breathing room but also color for a clean look.

• captaindash.com

What Happens Next

WhatHappensNext homepage

Depending on your website design you may just want to keep your design simple so not to take away from the finished product. If you want simple menu design you might want to take a cue from What Happens Next and use a creative typeface.

• whathappensnextbook.com

TeamGeek

teamgeek homepage

TeamGeek at first glance has a great flat design going for it but then you look at the navigation menu and understand the importance of cohesive elements. The flat icons used in the menu give the site a fresh look.

• teamgeek.co.za

Hauska

Hauska homepage

Once again keeping your designs simple doesn’t have to mean you are left with something boring. Hauska adds not only icons to the menu with their text but also an eye-catching black highlight that lets you know what page you are on.

• hauska.co.kr

Epic

Epic.net homepage

Though at first glance you might not think the Epic navigation menu is all that creative the use of the typography is what really makes the design so great. The alternation of large and smaller fonts makes the menu read well.

• epic.net

Libor

Libor's homepage

If you are trying to have a site that promotes you as a designer you will definitely want your site to stand out including your method of navigation. The mini navigation menu on Libor’s site is effective especially with the highlight design.

• liborzezulka.com

Plug and Play Design

Plug and Play Design

Plug and Play takes on the icon filled navigation style but does it in their own style. The icons have a deliberate design that is explained by the underneath text. The isolation of each icon in its own box keeps everything from meshing together.

• plugandplaydesign.co.uk

Dwarf Planet

Dwarf Planet homepage

Sometimes you don’t need to place your navigation menu in its own box, sometimes just giving each link enough breathing room works just the same. Dwarf Planet takes this method while providing a pink box to distinguish the current page from the others.

• dwarfplanet.co

Lucas Nikitczuk

LucasNikitczuk.com.ar homepage

Lucas Nikitczuk’s site is really an eye-catcher. Going far from the traditional page design you will notice that their is no apparent navigation menu. Upon closer investigation you realize that the small dots to the right of the screen take you to where you want to go.

• lucasnikitczuk.com.ar

Nerval

Nerval homepage

When designing your website there are some things you should know, one of them being that the navigation menu does not always have to be at the top of the page. Nerval’s site places the navigation closer to the bottom of the screen but large enough so that you can see it.

• nerval.ch

AWD Agency

AWD Agency homepage

Sometimes the horizontal navigation menu just doesn’t work out which leads you to having to try something different. The vertical navigation is always an option. As shown on the AWD Agency website a vertical navigation menu can look very professional.

• AWDagency.com

Webshocker

Webshocker homepage

Going all out on your navigation menu isn’t always necessary just to attract attention and let your visitors know what pages are available to them. Webshocker clearly is aware of this so offers simple dividing lines and an overhead highlight of color for the active page.

• webshocker.net

Kutztown

Kutztown homepage

If you’re looking for a really creative way to advertise your pages then Kutztown’s academic website is a great place to get inspiration. The site’s navigation is truly refreshing and throws all the rules out of the window.

• kutztown.edu

Unfold

Unfold.no homepage

Just because you place your navigation menu at the top of the screen doesn’t mean that it has to be boring. Unfold takes their navigation menu and turns it sideways for an interesting look that just so happens to work with their site design.

• unfold.no

Sensi Soft

Sensi Soft homepage

Sensi Soft has a truly engaging navigation menu as not only do they place their menu in the center of the screen but they also design it into a centerpiece that stays in the center of the screen as you navigate your way through the site.

• sensisoft.com

Secret Key

SecretKey website

The icon navigation menu may seem overdone at points but it is one design trend that can be continuously reinvented as shown in Secret Key’s design. Adding in color and movement upon scrolling over each link is a great look.

• secretkey.it

Resn

Resn.co.nz homepage

Resn’s site is pretty cool without even taking their navigation menu into consideration but once you do you may find yourself wanting to redesign your own menu. When you scroll over each navigation link a swan appears from underneath it.

• resn.co.nz

MacRabbit

MacRabbit/Espresso homepage

MacRabbit (makers of the popular Espresso code editor) has an icon based navigation menu that gives the site a clean and modern look. Instead of featuring a color change whenever you go to a new page the link is highlighted with a circle almost as if a button has been pushed in.

• macrabbit.com

Cultured Code

CulturedCode.com

Usually navigation menus tend to be fairly large so that the visitors will automatically take notice of it but Cultured Code prefers to do the exact opposite. The small navigation may not be your cup of tea but it nicely takes up little space.

• culturedcode.com

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sarah Bauer

    I’m loving the navigation menus that feature symbols and text together; it’s on-point for usability, and in these examples, looks fantastic.

    Cheers,
    Sarah Bauer
    Navigator Multimedia