What is vertical navigation? On websites, vertical navigation is a bar stretched alongside a web page, either on the left or right. It contains links to other web pages of the same site.
Considering your website's layout and other factors, a vertical navigation menu can add much more than good looks. If used correctly, it can enhance the user's browsing experience. And the better experience a user has on your website, the more likely they are to return.
Vertical navigation menus are not widely used. If you wish to include this design element in your website, read along to learn the advantages and disadvantages of using a vertical navigation menu and whether it is the best choice for your website or not.
Pros of Vertical Navigation Menu
Here are some advantages of using vertical navigation menus you must know.
1. Sets You Apart from Other Websites
Image taken from Strikingly’s user’s site
Not many people use vertical navigation menus, and this group may also include your competitors. Using vertical navigation menus will set you apart from your competition and make it easy for the user to remember your website.
2. Easy to Alter
When you want to add more links in the horizontal navigation menu, the space might become a problem. But it's not the case with vertical navigation. It has more area than the horizontal navbar, thus enabling you to add more links later.
3. Length of the Names Doesn’t Matter
In a horizontal navigation menu, the design doesn't appear attractive if the length of one link's name is far more than the other. On the contrary, the length doesn't matter in the vertical navigation menu. No matter the name length difference, it won't affect your site's design.
Furthermore, your vertical navigation menu can contain links to web pages with long names. They can even be multiline.
4. All the Links are Visible
In the horizontal navigation menu, only a few web pages fit on the bar, and the rest are hidden in the drop-down menu. This can lead to your users missing out on essential web pages, such as an online store, contact information, etc.
In the vertical navigation menu, there's plenty of space. None of the links to your web pages will be hidden.
5. Screen Sizes Don't Matter
A vertical navigation menu will appear at the same height and width regardless of the screen size. Therefore, you don't have to worry if your design will look clumsy on mobile or desktop devices.
Cons of Vertical Navigation Menu
Alongside the pros, there are cons of vertical navigation menus that you should know. These disadvantages will help you determine whether you should use a vertical navigation menu for your website or not.
1. Users Might Have Trouble Navigating
Vertical navigation menus are not commonly used, due to which some users might feel uncomfortable handling them. This may not be a big deal if your website is browsed by the same people repeatedly. They will get used to it in some time.
2. They Take Up A Lot of Space
Vertical navigation menus are broader and more prolonged than horizontal menus. Therefore, they take up more space and give you less width for the content. If you're using vertical navigation, be careful of your content's layout. The layout will look cluttery if you try to stuff too much content. And if you keep the text and media size smaller than usual, it might disturb the user experience.
Ensure you post the right amount of content that goes well with your sidebar.
3. Can Make Your Website Look Old
Vertical navigation menus were used in the old websites. Incorporating them can make your website appear out-of-date.
Vertical Navigation Menu Myths
Many people believe that a vertical navigation menu doesn't fit right because readers tend to scan a web page from left to right. Well, this information is incorrect. According to a study, when readers visit a website, they scan it in an "F" pattern. Meaning they'd start from the top-left corner and read horizontally. Then, they'd review the page from top to bottom.
A user's reading pattern can notice both horizontal and vertical navigation menus. Thus the reading pattern is not why you should or shouldn't use a vertical navigation menu.
How to Use Vertical Navigation Menus Correctly?
Vertical navigation menus can make your website stand out if used correctly. Consider the strategies listed below to reap the maximum benefits from a vertical navigation bar.
1. Aim to Keep Your Menu on the Left
Users are more comfortable using vertical navigation menus on the left because most websites with vertical navigation place them on the left. Remember the “F” reading pattern? It’s also one of the reasons why placing your navigation menu on the left is better. The audience pays more attention to the left side of the page than the right side.
However you design your website, it should be what the user is attracted to and comfortable using.
2. Set it Apart from Other Components of Your Site
Keeping the navbar's background the same or similar shade to the site's background will make it unnoticeable.
Use an opposite color for your vertical menu. For instance, if your site's background color or images are light-colored, aim for dark colors for vertical navigation, such as black. Another thing you can do is keep the same colors but of opposite shades. If your website's background color is a very light shade of purple, your navbar can be an extremely dark shade of purple.
Remember to keep the text of such a size and color that it is easily readable.
3. Keep the Components Simple
When using a vertical navigation menu, don't stuff the components altogether. Make sure all the links and other parts have equal space between them. Moreover, include easily identifiable icons to make navigation easier for your users.
You can also use the contrast of dark and light shades of colors to showcase the hierarchy between your menu items.
4. Don't Use Icons Instead of Text
Vertical navigation menus take up a lot more space than horizontal menus. To make space for more elements, some designers try to minimize the menu's width by replacing the name of web pages with icons. This affects the users' navigation process negatively. They either spend extra minutes to figure out what this icon means or simply leave the site.
5. Less Important Items Go at the Bottom
If you have a very long menu, all the items may not be visible without scrolling. Since different users will have different screen sizes, you can't tell where the page fold will hit and hide the items for each one of your visitors. Therefore, keep the essential menu items at the top and the less important ones at the bottom so that if they're cut off because of the page fold, the user experience isn't disturbed.
6. Avoid Duplicating Menu Horizontally and Vertically
Some websites use vertical and horizontal menus together. If used correctly, they can work out alongside each other. But some designers duplicate the entire horizontal menu in the vertical one, which opens by clicking an icon.
This gives the impression that the designer was confused about whether to include horizontal or vertical navigation, so they fit both. It also perplexes the user and may be redundant.
How to Add Vertical Navigation in Your Strikingly Site?
If you haven't built a website, you can create one hassle-free using Strikingly website builder. It lets you build your website using pre-designed templates. All you need to do is select the template you like, then edit it in the intuitive site editor. It offers robust customization features such as changing background colors, images, and videos, creating your sections, and adding multiple pre-made areas, such as an online store, blog, gallery, etc.
Strikingly automatically makes your website design suitable to view across all devices.
Here's how you can add a vertical navigation menu to your Strikingly website.
1. Go to the dashboard, and click the "Create new site" button.
2. Pick the template you think would go best for your website.
3. In the site editor, click "Styles" in the top-right corner.
Image taken from Strikingly
4. Next, click "Header & Navigation."
Image taken from Strikingly
5. From the sub-menu, tap "Layout."
6. Now choose "Layout G."
Image taken from Strikingly
7. Add the logo of your brand. You can do that by clicking "Edit" where "Logo" is written.
8. Below the Logo, type the title of your brand.
To add one of your sections or web pages in your navigation bar, click on the Settings icon beside the section's name. Check the box that says, "Show in navigation."
When done adding the navbar, play around with various elements to see what components suit your site best.
Now that you know how to use vertical navigation correctly, start building your site with Strikingly today, and showcase your business or blog to the audience worldwide.
