If you want to use a vertical menu for your website’s primary navigation, then this post is for you. Vertical navigation can be a great alternative to traditional horizontal menu bars, especially if you want your design to stand out from your competitors’ sites.
Vertical primary navigation is frequently used for sites with a relatively small number of top level menu items and no submenus, most likely because this menu style relies on flyouts or accordions for subitems. While accordions and flyouts can work well, most websites use horizontal navigation bars with dropdowns for submenus, making vertical menus with subitems slightly counter-intuitive for some users. Obviously, you don’t want to put form before function, so you shouldn’t use vertical primary navigation if you find it simply doesn’t work for your site.
I’ve included examples of different types of vertical primary navigation to inspire you, and I’ve even found a free vertical menu generator, some premium vertical menus you can download and use on your own website, as well as a number of templates featuring vertical primary navigation.
The website for Mellasat Vineyards, a producer of South African wine, showcases typical vertical primary navigation, with a relatively small number of top level menu items, no submenus, and left positioning.
Outdoor Italia, an Italian retailer of hiking, camping, and orienteering equipment and clothing, uses vertical primary navigation for their website, making it part of the animated header that dominates the site’s design.
MacAllan Ridge, a luxury resort in the Smokey Mountains, uses vertical primary navigation, and instead of placing the menu on the left like a lot of other sites, they’ve chosen to position it on the right.
Javi Malabares, a performer based in Spain, uses vertical primary navigation on his one page website, so visitors can click menu items or simply scroll to different sections of the page. While horizontal primary navigation can be used for single page websites, vertical menus seem to be more popular and quite user-friendly.
Designer and photographer Félix Péault also uses vertical primary navigation for his website, with the menu positioned at the top of the page and to the right of the logo, offering another option for vertical menu placement.
If you want to build a custom vertical menu for your website, then check out CSS Menu Builder. This site offers a free and easy to use tool for creating unique and functional menus, and it includes a number of images, styles, and options to choose from. Simply use the tool to build your custom menu, download the code, and add it to your site’s design.
This vertical menu is written using pure HTML and CSS3, and it includes light and dark versions for you to choose from, a dropdown menu with a slide effect, cross-browser compatibility (it even functions in IE7), and more.
This pack offers 3 vertical menus in different styles, and it includes layered and editable Fireworks PNG and PSD formats. This menu pack includes PNG and PSD files only.
This vertical menu is powered by jQuery and it includes flyout and accordion methods for displaying submenus. This menu can be customised using CSS, it allows an unlimited number of submenus, and you can control the animation speed, making it extremely versatile.
This HTML5/CSS3 template features a vertical menu with multi-level dropdown navigation, light and dark styles for you to choose from, social media integration, and much more.
This responsive one page template features vertical primary navigation, a working contact form with validation, a blog with Ajax comments, and more.
This responsive WordPress theme offers vertical primary navigation with accordion dropdowns for submenus, 7 colours for you to choose from, a portfolio page, prettyPhoto for displaying videos and images, and lots of other great features.
This HTML template includes vertical primary navigation with flyouts for submenus, a PHP contact form, Cufon Font replacement, jQuery image sliders, and more.
This responsive WordPress theme features vertical primary navigation, a shortcode generator, a filterable gallery, an image slider, jQuery effects, and more.
If you need to build an ecommerce website to sell computers, tablets, TVs, phones, and cameras, then you have to check out these Prestashop themes. All of these Prestashop...
Superb fast support and exceptional service, thank you! In particular Tim and Andy go the extra mile, thanks guys. Patient polite and professional :-) I had decided to try out another hosting company, which lasted about 24 hours before I realised that I was not going to get the same level of service from them that Evohosting provides. Without a glitch I was back with Evohosting... and putting it all down to experience! Highly recommended.