Website navigation menus are no longer just plain lists but are intrinsic to the design of a website. Designers are making them ever more appealing and functional so that visitors can easily find their way around the website. Bold colors and design elements attract attention to the more important elements on a web page, and mega menu sliders, drop-downs and flyouts arrange detailed lists of sub-menus to facilitate ease of use. At no time does the viewer feel lost in a site, as these mega drop-downs function like site-maps.
We’ve found some fascinating navigation menu designs on the web and have put them together to share them with you.
www.foodnetwork.com
Groups of navigation options on clicking the main menu item make choices within sub-sets visible all at once, so that the user can decide exactly where to go in the site without scrolling.
www.converse.comMega fly-out menus can contain a large number of sub-level links, while keeping the site design free of clutter and retaining user interest.
www.alessandrogiammaria.com
Oversized fonts work well for portfolio sites where there is a lot of visual content. Here the menu links are also repeated in the footer.
www.aussiebbqlegends.com/beef-lamb-and-pork
Bold, earthy and action-packed, these menu tabs are placed on wooden boards to match the logo. They set the tone for the site and the Aussie BBQ Legends experience.
http://www.stripturnhout.be/
The red of the logo forms a stark contrast to the black horizontal stripes of this notebook style vertical menu on a grid. The large distinctive font in neutral grey balances the contrast.
www.cobahair.co.uk
Every page comes alive with menus using bold fonts and different vibrant colors in this predominantly black and white photographic layout.
http://www.ronnypries.de/
Wide-tabbed menus give a neat appearance to website design, making it easy for the user to navigate through the site. When the menu tab is clicked, more text is revealed (sometimes extending to three sentences or more), serving as intro web content that doesn’t get buried on the home page.
http://www.utah.travel/
Slide-out menu tabs look like belts to echo the header design. On mouseover and click, different levels of information are revealed in menu sliders, in text and photographic images.
denver2012.drupal.org
From dates to maps, venue information, highlights, forms and calls to action, everything is within scrolling distance in this scrolling website design. It effectively uses large poster-like fonts, attention-getting color and single-color photography, emphasizing that “everything is within walking distance” at DrupalCon 2012 at Denver. Notice the footer navigation.
www.mellasat.com
This gorgeous vertical menu integrates the brand name and logo very effectively while adding a touch of class to the website. It becomes a predominant design element.
www.huisoranje.co.za
This is no boring standard menu! It is a design element in its own right. The photographs on the menu add a personal touch and draw attention while adding interest to the page.
www.narrowdesign.com
This vertical menu seems to dance as it responds to mouse movements! When clicked, the corresponding content slides out.
www.cxxvi.net
The logo is centered in this layout, using neat old-style fonts and clean design for horizontal navigation. Typewriter font is used in the footer.
www.carbonica.org
Casual fonts and circled text highlight the navigation tabs in this vertical menu.
www.hdlive09.co.uk
Note the casing around the font and the pencil shading behind each menu tab, which matches the style of lettering in the header.
OR
www.arvalabs.com
The menu tabs have an interesting gradation and embedded/etched font.
www.corporateriskwatch.com
The simplicity of the low-key, understated horizontal menu belies the boldness of this design. On mouseover and click, a band of black with vertical sub-menus highlights the section chosen. This design helps to manage sub-menus of varying lengths, without affecting the overall look of the page.
We hope this collection of great navigation menus inspired you to experiment with your own new-look, functional and creative navigation designs.
