5 Good Examples Of Vertical Navigation Done Right
If you are planning on implementing vertical navigation in your Miami website design, consider these 5 examples to give you inspiration on how to pull it off.
Smokey Bones features a long vertical navigation to the left-hand side of every page. This navigation doesn’t appear unnatural at all since most people expect the site logo to be on the top left corner and content to flow from the left to right as it is currently on the website. We love how the menu has been incorporated providing a list of all the restaurant’s dishes. The menu link works like a sub-menu and provides the reader with all the information they need at a glance.
The vertical navigation links on Amazon contribute to its unique and appealing UI design. This online retailer has used vertical navigation to provide easy access to their product categories. This site has so many categories and that’s why vertical navigation has worked amazingly well for it. It allows the categories to be tucked to the side while still making them easily accessible. Amazon’s strategy would work incredibly well for an ecommerce shop looking to simplify their filtering and provide an easy to access navigation. The site has been fully optimized to provide users with the best experience while keeping the clients on the web pages for longer.
The Metrick System
This ad agency has used vertical navigation to maintain a simple and clean website design. It follows the vertical style in a rather different way. The dropdowns are hidden so you can only see the extra links on the main menu when you click on the primary link. The sub-menu appears to the side and it fades away when you click. This vertical menu delivers the same experience to mobile users too. The only difference is that the sub-menu links appear beneath the main link on mobile. The good thing with this kind of vertical navigation is that it can suit all screen sizes (very responsive).
If you would like to make use of a clean vertical navigation, get some inspiration from Corum. The site has very simple features that stand out from the rest of the page content. The link styles, hover styles and dark text create a clear distinction with the content on the page. This is one of the best practices when using vertical navigation. You have to ensure that there’s a divide between the vertical navigation bar and the page content. They have achieved this by using a darker background color on the main page and a lighter one on the vertical navigation bar.
If you have a single page layout site, you can use vertical navigation to allow users to easily browse through content. This especially works for informational websites. Nua Bikes has used vertical navigation to provide all this content in single page making it easier for users to access its content. This design works for the site because it has dozens of pages that are full of content. The vertical navigation has a similar background with the main content blending perfectly with other elements of the page.