How to Choose the Right Navigation Menu for your Blog

navigation menu style list

Improved CTR, reduced bounce rate and increase in sales, if any; are a few rather too obvious benefits of all the many benefits any website or blog stand to enjoy from having the right navigation menu in place.

    Even when navigation menu is given much lesser priority in blog template design by most template designers, putting the nav menu among the many easily neglected important features that are considered less important features of blog templates because it receives from a few to no attention when most bloggers are making template choices for their blog; I consider the navigation menu seriously and I think you should, too.


    Because coupled with the other SEO tweacks and patches, having the right navigation menu style in place on your blog would undoubtedly impact your blog SEO efforts for good; far more than you can ever imagine.

    horizontal and vertical navigation menu

    So, instead of focusing more on beautiful navigation menu for your blog, it is of more value to you and your blog to concentrate more on using the right navigation menu.

    In this post, we would be discussing the blog Navigation Menu at length. And our main focus would be on how to choosing the best and the right navigation menu style for your blog, blog navigation menu functions and usages among a host of other topics in that sphere.

    So, let's get started. Shall we?

    What is Navigation Menu?

    Navigation Menu refers to the set of navigation links that are enclosed within a single "div" tag with the class or id declaration of navigation menu present in your blog. Usually, navigation menu includes your blog homepage link, about us page link, contact page link among other vital pages including links that lead to other vital sections and subsections of your blog.

    What is Navigation Link?

    Navigation Link refers to any html link that points to a particular page, a section or sub-scetion of your domain. Links linking to external domains can also be included in the navigation menu hence referred to as navigation link.

    Based on the definition from above, any link on your blog could be made a navigation link.

    Why Must You Use A Navigation Menu?

    Because navigation menu helps your blog visitors navigate your blog properly and accordingly.

    Of course, navigation menu is not just there in your blog for beautification even then, that is also a purpose but navigation menu is present there for more reasons than that you know of.

    In a nutshell, while there certainly are other reasons attached, the only major reason you have navigation menu there on your website is to serving the directional needs of your blog visitors.

    navigation menu purposes


    • Directional Purposes for Human Visitors

      Because navigation menu tells and shows your blog visitors where to go on your blog and what page within that blog should be visited to do what, the blog navigation menu is one of the first things any visitors to your blog would want to check.

      Let's supposed Mr A arrives your blog from a Google Search Result Page (SERP). And the particular page he landed on talks about a service you render.

      If Mr A is interested in your service, most likely; he would be needing to use your blog's contact page and that is expected to be found in your navigation menu.

      navigation menu contact page link
    • Directional Purposes for Non-human Visitors

      Non-human visitors include search engines bots and spiders, feed syndication systems etcetra.

      These non-human visitors, especially the search engine bots take your navigation menu into account and use it where and when necessary.

      Although some search engines such as Google automatically detects your blog's most important pages and display them in search result pages relating directly to your blog name or blog's specific content; most search engines including other non-essential bots and spiders rely majorly on the links you specify in your blog navigation menu to be able to display the appropriate (directional) links for your domain.

      navigation menu links on SERP

    How Many Links Can Your Navigation Menu Contain?

    As many links as you wish to be included in your blog navigation menu.

    Ideally, your blog navigation menu should contain links to as many important pages (within and outside your domain) as you may think of but such links should be of value and directly related to your domain.

    For example;

    It is not a good idea to have a link linking to Mr B's Twitter profile page when your own Twitter profile page is of Mr A. - doing such would only create confusions (to both bots and human visitors) and likely loss of profits to you.

    Vertical or Horizontal Styled Navigation Menu? Which of them Should be Used?

    This is a question I have seen repeated many times over and often; it is usually followed by other similar questions such as:

    • Vertical navigation menu or horizontal navigation menu. Which is best?

    • Which of the vertical navigation menu and horizontal navigation menu is more common?

    • ≤p>How do I decide the best navigation menu style for my blog?

    • Which navigation menu design is most suitable for the best SEO results?

    • Should I use responsive navigation menu in my blog?

    • How do I make my blog navigation menu responsive using CSS?

    • Should I use a sticky navigation menu in my blog? Or,<.p>

    • Should I simply use a fixed navigation menu in my blog?

    Well, to reflect on those questions I would say; since the advent of the internet, I have seen most bloggers and common web users so used to the native navigation menu order, arrangement and placement.

    Therefore, similar to peoples' habit towards the so accustomed blue coloured HTML link, the horizontal navigation menu style wins peoples' heart even when it is not the best navigation menu style for more than ninety percent of blogs.

    So, Which Navigation Menu Style is Best for Blog? Horizontal or Vertical?

    For many reasons, vertical navigation menu style is the best format. So, when choosing a navigation menu design for your blog, be sure you are going for the vertical navigation menu styled themes or make one nice vertical navigation menu for your blog using CSS.

    See this: how to create and design vertical navigation menu using CSS

    What is Vertical Navigation Menu?

    Vertical Navigation Menu is the type of navigation menu in which navigation links are arranged and displayed in vertical order.

    What is Horizontal Navigation Menu?

    Horizontal Navigation Menu is the type of navigation menu in which navigation links are arranged and displayed in horizontal order.

    Why is Vertical Navigation Menu Considered the Best?

    Have you logged on your Facebook account recently? Or either of your Google, Twitter, Microsoft accounts? Do you noticed anything common in the way the navigation menu are arranged? Or, in the format and style used?

    Have you for once realized that these global services use vertical navigation menu style?

    Yes. I get it. What you see on Google, Facebook, Twitter, Microsoft etc. may seem like double or even multiple navigation menu but the point is; the most valuable and important navigation links that Facebook, Google, Twitter or whichever of them wants you to see; are arranged and stacked up in the vertical navigation menu style.

    Is that correct or am I just assuming this?

    Anyways, you may check your Facebook or Twitter or Google account now to confirm it.

    Confirmed? Okay.

    Now that you know, you may not jump onto conclusion yet. Just read on.

    But if as big as Google, Facebook, Twitter, Microsoft etc. could stick to using vertical navigation menu style for displaying their important navigation links, you should have chosen a winner between vertical navigation menu format or horizontal navigation menu format.

    To help you even further in making decisions that would eventually give desired results, I have a few more hints for you. Just read on.

    Benefits of Using Vertical Navigation Menu

    1. It Attracts More Clicks:

      Because vertical navigation menu is easily spotted and accessible to viewers, it tends to attract more clicks than the horizontal navigation menu.

    2. It Fits Better to the Screen:

      You may have not observed this yet but when you take a closer look and compare the two, you would realize that the vertical navigation menu fits better to the screen.

    3. More Orderly Arranged:

      Here, let's take the Google's Gmail or similar navigation menu and compare them. Can you see the neatness of the navigation links and the order of the arrangements?

      Lovely. Right? Such is only easily achievable using the vertical navigation menu format.

    4. It Can Conveniently Contain More Links:

      Although the horizontal navigation menu can also contain as many links as the vertical navigation menu, it is more easily and neatly done in vertical navigation menu than with the other.

      Besides, for improved SEO values, horizontal navigation menu may not contain too many links unlike the vertical navigation menu.

    5. Unusually the Best Style for Mobile Views

      Although vertical navigation menu may not be a perfect one for mobile viewers, but if you could put the right CSS, JS or other similar codes to use; vertical navigation menu would undoubtedly give the best experience for mobile users.

    6. It Can Create the Best User-Experience:

      Again, let us assume the e-commerce giant; Amazon or AliExpress uses horizontal navigation menu instead of the vertical navigation menu which is being used? What experience can you imagine the users of both websites would have?

      Besides the SEO and promotional benefits of Using the vertical navigation menu, there are also optimization benefits to it.

    Demerits of Using Vertical Navigation Menu

    1. It Occupies More Space:

      If you are the type that fancy using boxed version of your blog template, using vertical navigation menu may not be a good idea for you as it would further reduce the space (width) occupiable by your blog post and sidebar content.

    2. It Is More Cumbersome

      To some people, vertical navigation menu seems to be overtly cumbersome to view.

    3. Usually Not the Best Style for Small Screens

      If your blog template uses a vertical navigation menu which is not extremely responsive and you are not the type that can whim up some fine codes to optimize the vertical navigation menu appearance, I would suggest that you abstain from using it because it would be very unfriendly reading your blog from small screen devices such as mobile phones.

    Benefits of Using Horizontal Navigation Menu

    1. It Occupies Lesser Space:

      If content area is a priority for your blog, horizontally styled navigation menu is for you as it allows you maximize the available space for both content and sidebars; if any.

    2. It Is Lighter

      Obviously, horizontally styled navigation menu is more lighter to view. Unlike the vertically styled navigation menu that is rather cumbersome, horizontal navigation menu are light both to views and often from source.

    3. Usually the Best Style for Small Screen Devices

      Horizontally styled navigation menu are usually well-fitted on any screen sizes for as long as the theme in which it is used is responsive.

      This is mostly because it appears to be more accessible in small screen devices (such as mobile phones) than the vertically styled navigation menu.

    4. Demerits of Using Horizontal Navigation Menu

      1. It Easily Eludes View:

        Because horizontal navigation menu occupies fewer space, it can be easily overlooked by most website visitors.

      2. Good Only For Minimal Navigation Links:

        As earlier noted, horizontal navigation menu should be used only when you have fewer navigation links to display otherwise, you could be making it hard for your visitors to seeing the content you strive so hard to create for them.

      3. It Attracts Fewer Clicks:

        That's it! Horizontal Navigation Menu attracts Fewer clicks as may be compared to the vertically styled navigation menu.

        This happens for many reasons including the size of the nav-area, human-behaviour (sight reflex), positioning among a host of other reasons.


      There could be more merits and or demerits of using either of the vertical or horizontal navigation menu but I would love to peg the list right there so that I may proceed to the next topic.

      And with that, we arrive at the next related topics within the subject matter of this post and those topics are; sticky navigation menu and fixed navigation menu.

      If you could recall, I mentioned that questions about horizontal and vertical navigation menu are often accompanied by similar questions on sticky navigation menu and fixed navigation menu.

      So, just what is sticky navigation menu or fixed navigation menu?

      What is Fixed Navigation Menu?

      Fixed Navigation Menu refers to the set of navigation links that are enclosed within a single "div" tag that is relative to the viewport. Fixed navigation menu appears stable in its same position on the page even when the user scrolls down or up the webpage.

      Fixed navigation menu is often referred to as "sticky" navigation menu. While both appear similar, they are not the same. We discuss both of them further in another post.

      What is Sticky Navigation Menu?

      Sticky Navigation Menu refers to the set of navigation links enclosed within a single "div" tag that when its point is reached, scrolls with the user's movement on the page. Sticky navigation menu returns to their initial position within the webpage when their initial position is passed or it behaves as instructed from the source.

      Which Navigation Menu Should Be Made Fixed (Sticky)?

      If you like, you can make both vertical and horizontal navigation menu sticky (fixed). The point is, for whichever one you want, making your navigation menu sticky (fixed) only give your navigation links added advantages.

      Final Note:

      Your blog navigation menu is just as (or even more) important as the content of your blog (posts), so getting your blog navigation menu style, format, arrangement and content right is just as good as enriching your blog with good content - and it all start in the design.

      Do You Expect to See A Topic Not Discussed?

      If you expect that a topic closely related to the content of this page is not discussed or addressed in this tutorial, you may let us know of it using the comment box from below so that we may address it too.


    to top