Vertical Primary Navigation Menus: Examples, Templates & MorePosted on August 6, 2012
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.
Vertical Menu Generator
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.
Premium Vertical Menus
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.
Website Templates with Vertical Primary Navigation
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.
Most Popular Posts
- @Viewofsocial Hi there, all our servers are up at this time -- if you are having issues with your account / websites, please open a ticket., Jun 17
- Rampage: This has now been resolved., Jun 17
- Rampage: There is currently an issue with this server, we are working on it., Jun 17
- @Kristoff1875 Welcome :) Hope you're doing well!, Jun 11