Choosing the right menu for your design is very important, get it wrong and you could find that visitors end up leaving your site early, after all the menu is the main way that your visitors will navigate through the site and if they cant find what they came to your site for within a few seconds then that could be a lost visitor.
There are countless ways of producing these menus and in this post I am going to explore 6 of the best ways and give the best examples and explain why I recommend them.
Drop Down Menus
This is the most popular menu out there, it’s the easiest way to organise and navigate your website.
This is your main style of drop down menu you’ll come across, a line of links near the top of the site. The visitor hovers over a heading and the drop down appears directly beneath it. However, there are more advanced uses for drop down menus, take this site as an example and you’ll see that there is a lot of space around the drop down that isn’t been used, if you have a lot of content on your site then it’s worth making use of this space.
Here are some examples of how you can add a more advanced drop down to give visitors access to more content.
So ESPN has a lot of content on their site and each section is highlighted with a very advanced drop down, for example on the NBA tab you can see the pages on the left, then some posts, headlines, links and even a way to add some of your own custom information. Now this is probably overdoing it for most websites, but I think you get the picture. If you have a lot of content on your site and you want your visitors to have easy access to it, then section your site up and make the most of the drop down for that section.
I think this menu is probably about right in terms of depth you should have on the drop down for most sites, it gives the visitor easy access to what they are looking for whilst also keeping the spacing and organisation looking professional.
Info World uses it’s drop downs to highlight the latest posts in that particular category as well as a featured post.
Porsche uses their drop downs to give a very basic introduction to the car you’re about to select including a nice sized image, it’s a nice quick view of where you’re about to go.
The White House site (like ESPN) has a lot of content, their menus are organised into sections and then subsections, they use bolded links to highlight certain sections of importance.
TV Networks like to make all their shows easily accessible so this is a nice way of displaying a section that has a lot of sub sections. Because of the amount of links in these sub sections, they have both gone for displaying the links in alphabetical order. And Fox highlight their main shows as images along with the time they are shown live on TV, this is a great way of maybe displaying the latest posts or news.
Tabbed menus have become popular lately and are a great way of showing sub sections whilst in that section, you cant really do that with drop down menus. So say for example you are on the About section, when the visitor is on any page from that section they’ll see About the Company, About the Founder, The Team and so on within easy reach. Here are some of great examples:
Unlocking.com have 3 main sections, having a drop down for these would make it look a little empty, so by having that second line of navigation it makes it look more substantial which in turn makes the site look like it has more content.
Ugmonk is doing the menu a little differently, instead of showing the sub sections when hovering over a tab, it only shows the sub sections when in that section.
Now you may think that having a tabbed menu will take up a lot of space, however Designsensory disproves that, they use a tabbed menu to the right of their logo and it only takes up half of the width of their site.
Like Ugmonk, Acquire Services only shows the sub sections when you are in a section. What I like about this menu is that it highlights the page you are on with an arrow pointing to the content, this is a nice touch and is not really possible with drop down menus, you can highlight the top level of the menu but the drop down isn’t showing so you cant highlight the current page.
A lot of news sites use this type of menu as a drop down would get quite messy. I think ABC News does it most effectively, as does BBC News. News sites are popular with all types of users including those that aren’t necessarily computer literate, so if your site is likely to appeal to that demographic then it’s worth looking at news sites to see how they organise their content.
Two Line Menus
Two line menus are menus that have a sub line of text under the title. They are fairly new and are designed for low content sites like designer portfolios or personal blogs, this is because having things like drop downs would look a mess because of that extra line.
It’s important that you distinguish which section the visitor is on, Abstraktion do this nicely by making the link white. The sub line should always be a lighter colour than the title so as not to distract from the main link.
Advuli only have 4 sections so they have opted to space the items out and put their logo in the middle, this gives it a feel of using more space that it actually is.
Julien Lavallée makes good use of the space in the header by adding a logo, menu and social links. He’s decided not to link the sub line, personally I think this is a bad idea.
The menu makes up the entire header of Michael Dick’s site, and adding some nice spacing between each link as well as the border under the active link makes it look fuller.
Minimalist menus are not for everyone nor every site. They are normally reserved for designer’s websites as it’s very hard to get them right. There’s not a lot I can say about minimalist menus apart from it’s all about simplicity, beautiful typography and excellent spacing, here’s some examples of some nice ones.
Icon Enhanced Menus
Icon enhanced menus just give menus a little more presence, they are not a good idea for sites with a lot of content but if you have a few sections then it can really help make the menu look fuller.
Carsonified uses nice simple icons for their menu using the same colour for these icons as their links to give it uniformity. Because there are 8 links in the menu it would look a bit cluttered if they showed icons on all of the links by default, so in order to see the icon you have to hover over the menu item.
Macrabbit does the opposite, because they only have 5 sections they show the icons by default, if you hover over the links it will make the icons colour and add a glow around the link.
List Based Menus
List based menus are a good way to go if you have a few sub sections in each section to not warrant a full drop down, for example if you only have 2 sub sections then there isn’t much point in having a drop down.
30elm is a fantastic example of a list menu, it has three core sections (explore, discover and connect), the main link is bold and sub links are not. This menu also allows them to have a sign up and sign in section that looks like it’s part of the menu when it’s not, which is a great use of screen real estate.
Menus can be used for other things too. On Blake Allen’s portfolio, he uses them to list his two main design disciplines, Websites and Identity. This is a great way of navigating through a portfolio but could also be used effectively if you only have 2 sections on your site that have a lot of sub sections.
Change.org has gone for a simple 4 column list of their sections, you’ll notice if you look carefully that these are the same links as the drop down for View Causes. This means that these sections are more prominent to the visitor whilst also providing space for their “Start a Petition” call to action area to have prominence in the header area.
Hash Rocket has done their menu a little differently, by having it in a two column list to the left of their banner area it means that they can use the “above the fold” space of the browser more effectively.
Jeffrey Docherty has incorporated pages and his portfolio links into one menu, doing this with a drop down would have meant only two sections which would have made the menu look rather empty. By using a list based menu he was able to make 1 section use three columns.
Matchstic have used their menu to incorporate their logo, mailing list and address.
This is my favourite one, each section of the site has a different colour, so for example, Produkte uses red and Know-how uses purple, this is a nice touch but is also very effective from a usability point of view because it allows you to recognise quickly which section you are in.
Something a little different
I’ve looked at the most popular styles of menus, however some people get a little adventurous. If you are a business I’d stay away from these, but here are some examples of something a little different:
What menu should I use then?
As a rule of thumb if you are a business and have plenty of content (eg, an about section, services section etc) then I’d go with a drop down menu.
If you have a lot of content in the sub sections of your site but not so many main sections, then maybe look at a tabbed menu or a list based menu.
If you don’t have any sub sections to your site then you can investigate using a two line menu.
And only use a minimalist menu if you’re confident and your design calls for it, don’t have a minimalist menu if your design isn’t minimalist, it will look wrong.
There are a lot of different ways to design a site, yet a lot of websites use a similar layout or a similar font, this is because from a usability point of view it’s easier for visitors to navigate a site that is familiar to them and easy to read.
Navigation is also a very important part of usability and that is why most sites have drop down menus or tabbed menus, so when deciding what menu to choose make sure you look at the demographic of your site visitors and make it as easy as possible for them to navigate it.