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.

Going MEGA

Mega Drop-Down Menus
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.

Mega Flyout Menus

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.

Mega Fonts
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.

Big and Bold Menu Design
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.

Stark Contrasts and Large Fonts
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.

Bold Fonts, Bold Colors
Every page comes alive with menus using bold fonts and different vibrant colors in this predominantly black and white photographic layout.

Wide-Tabbed Menus
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.

Multi-Level Sliders  
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.

Poster Style Layout, Footer Navigation
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. 

Vertical Navigation Menus
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.

Photographic Menu
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.

Dancing Vertical Menu
This vertical menu seems to dance as it responds to mouse movements! When clicked, the corresponding content slides out.

Fonts With Character
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.

Casual Look
Casual fonts and circled text highlight the navigation tabs in this vertical menu.

Hand Coloring
Note the casing around the font and the pencil shading behind each menu tab, which matches the style of lettering in the header.


Shadow Effects and Gradations
The menu tabs have an interesting gradation and embedded/etched font.

Understated Makes a Bold Statement
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.

Website Design Tutorials and Resources