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 vertical menu is powered by Javascript, and it comes with custom icons in three different sizes. Plus, this menu offers lots of options for you to choose from, including 4 colour schemes, multiple animation effects, and left and right opening directions.
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.
Maja
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.
Are you looking for web hosting? Then check out our UK web hosting plans!
Save 20% on your first payment for any new hosting plan, VPS, or server throughout May 2017. Simply enter code MAYMAYMAY during sign-up. 20% Discount is available on Monthly,...
16 Stunning Infinity Style Company Logos For Your New Business
30 Great WordPress Themes for Business Directory & Service Websites
23 Great WordPress Themes for Restaurants, Bars, Cafes & More
25 Great WordPress Themes for Charity & Non-Profit Organisations
13 of the Best Free & Premium WordPress Themes Utilizing Google’s Material Design
I've been with Evohosting coming up to six years now and not once have I had any problems with uptime or site speeds. It is one of the most consistent, solid, rapid and reliable web hosts about with an effective, friendly and informative customer support team that's swift with resolving the rare issue. Ultimately, for the service, support and features one gets, it is more than worth the cost. I'm so glad to have discovered Evohosting and hope it continues to excel and improve itself.