Last updated on February 26th, 2018 at 10:54 am
Along with your logo, your menu is one of the first elements your visitors see when they hit your blog. It is absolutely essential that you organize your blog menus the right way!
While customizing sites and providing support for my customers, I see a lot of blogs. 9 out of 10 bloggers organize their menus the wrong way.
Oh, harsh, Heather!
Yeah, well, I was totally in the same boat about a year ago. I was working on our last website re-design and the new layout I wanted to use didn’t allow as much room for menu space.
A change in layout forced me to look at our menu. I had to narrow down which links were the most important. I was also super serious about using best design practices for our shop to optimize it and make it as easy as possible for our visitors and shoppers to find what they’re looking for.
So, I read a lot of articles about menu design. I bet you didn’t realize that people actually write posts about the proper way to set up your menu along with some pretty intense analyses. Yup, they do. And it was a game changer for me.
When I reorganized our menu to align it with the purpose and goals of our website, guess what happened?
Visitors started navigating to the pages I wanted them to visit. They also visited other places on the website, of course. But by letting my site goals drive the menu design, I saw immediate results.
So, I’m going to break down the right way to design your blog menus.
I’m also going to explain the why behind my strategies based on my vast research as well as experience on this site (and other sites).
You’re also going to score a free Menu Planner Worksheet at the end of this article to help you whip your menu into shape.
So, let’s do this!
Where you place your menu on your blog is generally determined by the options available from your blog template or theme.
But I want you to understand why you see menus placed in the same few locations over and over again across the internet.
Eye Tracking Heat maps
OK, so internet analysts have done research on the way people view websites. They examined where internet users look first and where on the screen they spend the most time looking. Researchers use heat maps to depict “hot spots” on the screen where visitors spend most of their time looking.
On a heat map, red indicates areas of high activity. Orange less. Yellow even less. Green and/or blue are used to depict areas visitors spend the least amount of time looking at.
To the right, you’ll see a classic website heat map.
Note the “F” pattern that includes the top of the page and along the upper left-hand corner of the screen. This is also sometimes depicted as a triangle or an “E” pattern can sometimes be seen.
What heat maps tell us is that visitors focus on the top of the screen and the upper left-hand corner.
You want your menu in an area of prominence. If your visitor can’t figure out how to navigate around your site within a few short seconds, they’re going to leave. They’re certainly not going to stick around and view more pages because, well, they can’t find them!
So, best menu placement for the primary menu is at or near the top of the page with a preference for the left side.
Common Menu Locations
So, let’s talk about the most common menu locations that we see over and over again on the internet. I’ve included examples to give you a visual.
1. At the top of the page parallel to the logo. May be opposite the logo or split on both sides of a centered logo.
2. Directly under a logo at the top of the page.
3. At the very top of the page alone or with social icons. May be left-aligned, centered or right-aligned.
You may see some alternate locations but these 3 locations are by far the most common seen on the internet.
Why these are common menu locations
And this totally makes sense when you consider the heat map above. Your menu needs to be front and center, right where your visitors will notice it.
There are times to be unique when it comes to your blog design. I absolutely believe in unique logo designs. However, menu placement is one design element where you should stick with tried and true.
Internet users are very, very accustomed to certain elements being included on a website. They expect these elements being located in specific spots. If you deviate from these expectations, you are going to lose.
Internet users expect a logo on a site. This tells them “where” they are on the internet. They expect an easy to locate menu. They expect a way to search a site.
Social icons, sidebars and sliders. These are all optional elements that can be used depending on the nature of your site. Internet users are flexible with the placement and presence of these items.
But seriously, do not mess with the essentials (again, logo, menu, search).
When you’re organizing your menu links, it may seem like a great idea of include a bunch of links, including drop downs with every one of your blog categories listed so visitors can easily find all your content.
This is actually the exact opposite of what you want to do.
I’ve seen blogs with no less than 50 menu links in the menu bar. This obviously includes drop downs, sometimes with multiple levels.
No! Just no, guys.
I am not going to sugarcoat this because menu design is so important. This is too many links. Period.
So, how many links is the right number?
Experts recommend 4 – 7 menu links maximum.
And most recommend NO drop down menus. NONE!
OK, I’m gonna let most of you sit there and absorb that for a moment. I know it’s a big shock. So, take a moment then I’m gonna explain the reasons behind these rules.
Less is More in Menu Design
There are many classic marketing studies that show the MORE options you offer a customer, the LESS likely they are to make a choice.
Sooo, give them 50 menu links, how do they know which link is going to take them where they want to go? Yes, if your links are well labeled that helps, but it still can lead to classic option overwhelm.
This same concept is seen in restaurants. Talk to super successful restaurateurs and you will find that a smaller menu is always better. Super huge food menus indicate you don’t specialize in what you’re really good at. Plus, diners can easily be overwhelmed by a menu that goes on for a dozen pages.
So, the first reason why you should keep your menu simple is to avoid option overwhelm and indecision paralysis.
Your menu links have SEO value.
The code on your blog tells the SEO bots that “this is my menu” and “these are the MOST IMPORTANT pages on my blog”.
If your menu contains 50 links then you’re diluting that importance signal and harming your SEO.
Guys, let’s be honest. You have a goal in mind for your visitors. You want to direct where they go once they get on your site.
Whether it’s encouraging them to visit your shop so they’ll buy from you, get them to subscribe to your newsletter, prompt them to click on one of your ads or have them follow one of your social media profiles, you have a goal and a path you want them to follow.
Your menu serves as your guidepost, your traffic controller, to lead them where you want them to go. If your guidepost has 50 destinations, that’s total mixed signals.
I’m going to give you a really graphic illustration of this.
You don’t want your menu giving these kinds of signals:
You do want these kinds of signals:
I am a fan of examples. And I want to share the menu designs of some of the top bloggers in the world. These ladies and gentleman make millions of their blogs. And they all follow the rules I’ve outlined above.
1. Melyssa Griffin – super successful website designer turned blogging/social media guru. 4 links. No drop downs.
2. By Regina – another web designer turned successful blogger. 6 links (7 if you count the cart link). No drop downs.
3. Problogger.com – HUGE blogging tips blog with hundreds of thousands of followers run by Darren Rowse. 7 links. No drop downs.
4. Smartblogger.com – Website run by Jon Marrow, HUGE, HUGE blogger making lots o’ money. 6 links. No drop downs.
5. Femtrepreneur.co – Super successful blog of Mariah Coz. 6 links, no drop downs.
I think we’ve got the trend, right?
A Breakdown of the Rules
So, I want to go over the rules again in a quick, list manner so they’re very clear. (I do love a list).
1. Stick to tried-and-true menu locations.
2. 4 – 7 menu links.
3. No drop down menus.
That’s it. 3 “simple” rules.
Only, it’s not always so simple to implement these rules. It can actually be a little painful. I know, I am still pruning my menu to fit these rules.
Yes, I still have drop downs. This has to do with our shop. If I didn’t have the shop on the site, I would definitely have ZERO drop downs. But I want to make my product categories easy to find and drop downs do accomplish this.
UPDATE: Huzzah, I have finally gotten our site in line with the rules! The new design has 5 menu links and NO drop downs!
So, in some cases, the rules can be bent. IF you have a shop on your site, limited drop downs may be necessary but for a strict blog, NO.
What Links to Place in your menu?
Unless you’re already living by the rules, you may need to do some major pruning on your menu links. So, how to you decide what links to add to your menu?
Home Link or no Home Link?
The trend is definitely away from having a Home link in the menu bar. Especially if your menu area also contains a logo which links to your home page.
Most internet users are going to know they can click on the logo to get back to the home page.
You will notice only 1 of our example sites above has a Home link. These bloggers know that the menu bar is prime real estate. Don’t waste it on a home link when your visitors can just click on your logo.
About Page or Start Here Page?
There is a big trend toward what are known as Start Here pages. They’re a bit like a broader About Page.
They don’t replace your About Page by any means. Your About Page tells your story in a way that allows your visitor to connect with you.
A Start Here page tells about your site. About what your site has to offer.
A good Start Here page provides a brief description plus links to other areas on your site. A Start Here page is like a roadmap to the rest of your site.
Some sites will have both a Start Here and About page linked in the menu. Some will have just one of these.
Choose which best fits your site. If you offer different services, products, topics, etc. a Start Here page will be a good fit for you.
If you’re a more traditional blog focused mainly on posting, an About Page will be all you need.
This is a no brainer. If you have a shop and want to sell products, link your shop in the menu.
But rather than landing your visitors on a shop page that contains ALL your products (if you have quite a few) consider a sort of Shop landing page with a grid of links to your different product categories (along with an option to shop all).
This is like a second layer or navigation for your shop and it really works. We saw great results when we added this sort of arrangement to our shop.
If you have many products, also consider adding product filters and widgets in a sidebar so visitors can easily navigate through your shop.
All your shop categories DO NOT need to be in your menu. Find a different way for visitors to find the product they’re looking for.
And this way, you can minimize or eliminate drop downs for your shop menu link.
The most popular type of menu links that I see get totally out of hand on blog menus are category links.
Some blogs have dozens of category links in their menu. I’m not kidding.
Stop the madness!
Now, I know some of you (especially you food bloggers out there) are going to says, “But I have to have 25 category links in my menu. How will readers find my recipes otherwise?!”.
There are many, many other ways to display your categories on your blog. I’m going to give you a few ideas (and examples) in this post and then we’ll talk about it more in later posts. But trust me, you do not need to list all your categories and sub-categories in you menu bar. You. Just. Don’t.
So, let’s look at a couple examples (yea, examples!).
I really heart this minimal yet colorful blog design.
It’s really more than just a food blog. It’s a bit of a food and travel blog but the design is just excellent.
The menu has 5 top links. The “More” link does have a drop down with 6 links. I would probably replace that with a really great “Start Here” page that links to those pages instead but it still works.
Notice there is no “Home” link.
The 4 main links are 3 category archives plus a “Buying Guide” which is like a “Shop My Kitchen” page with affiliate links.
Check out the Recipes archive page. It’s a grid style layout with no sidebar. Posts are cleanly displayed with an image and title.
The brilliant part about the archive design is the colorful bar that includes a Search widget, a Search by tag widget and a Search by Category widget. Yes, there are almost 500 posts in the Recipes archive BUT they’ve made it super easy to search in 3 different ways.
Ahem, this kinda looks like our Archives page template from the Prima Donna theme… Just sayin’. (Also looking at adding this layout to our Standard themes in a future Update. Stay tuned…).
You could also get some custom work to a theme to add this feature to it. It wouldn’t be terribly expensive or difficult.
UPDATE: I Am a Food Blog recently updated. They are still rocking the minimal design. Now they’re down to just 3 main menu links. Check out the plus a non-intrusive secondary menu. And they’ve added an awesome Category widget in the middle of their home page to help readers find their recipes. On their category pages, they’ve kept the 3 search widgets at the top which is an excellent choice.
Another great food blog with a super minimal menu.
3, count ’em, 3 menu links. No “Home” link again. The links include About, Recipes, Shop. No drop downs.
The home page layout is a bit more complicated than I Am a Food Blog but it is intended to highlight different groups of posts. But I really like it.
Now, click on the “Recipes” link. Ah, another nice little grid archive with a different kind of search feature in the sidebar.
Changing gears, we’re switching to a successful fashion/lifestyle blog. (Run on Blogger!)
Hannah’s menu has 4 links, no drop downs. Simple, clean, that’s it.
So, yes, you can totally make a blog menu work without 25 category links.
UPDATE:A Fashion Fix has also recently update to a new look. Again just 4 menu links with no drop downs.
Alternate Ideas for including Category links in your design
There are many ways to include your categories in your blog design.
We already talked about using a special archive/category page layout.
Many of our Blogger templates feature grid style Label and Archive pages. You could also create something similar using a gallery script like our Responsive Image Gallery for Blogger.
I also endorse having your categories somewhere in your post layout. In the post header or footer, where ever works, but if you’re using your categories the right way, this is a great way to keep readers readin’.
Don’t forget your sidebar! There are numerous ways to link to your Categories or Archives in the sidebar. A tag cloud widget, a category drop down widget, or even a linked image widget.
Check out how I’ve added our categories to our sidebar. I used large icons for our 4 main categories then a very simple text/cloud type widget for popular sub-categories beneath it.
There are ways to use your categories without stuffing them all in a huge menu.
So, Exactly What Links Should You Have in Your Menu?
It is very dependent on your blog but here are is a basic scheme for a 6 link menu with no drop downs:
- About/Start Here
- Category 1
- Category 2
- Category 3
Or for a blog without a Shop,
- About/Start Here
- Category 1
- Category 2
- Category 3
A menu is a great place to add a link to a page where visitors can Subscribe to your newsletter. If one of your goals is to grow your email list (and it should be), you want to give your readers as many chances to sign up as possible.
You will notice this site has multiple subscribe widgets. Since adding this strategy our list has grown a ton (the free stuff helps, too..!).
Now, which Categories to add to the menu?
Your best stuff! Always link to your best stuff! Check your analytics and find out what visitors are really loving and focus on those categories.
For your other categories, highlight those in the sidebar or another area so they can discover them later. But put your best foot forward. Let new visitors get hooked on your best stuff so they come back for more.
Also, think about what your goal is for your visitors. Do you want them to explore your blog posts? Sign up for your newsletter? Visit your shop?
Think about how you want traffic to flow on your site as you design your menu.
Some blog themes offer the option of multiple menu locations.
You may have the option of 2 menus near the top of the page.
Additional locations may include the footer area or a custom, vertical menu in a sidebar. You’ll note we have 2 menus in our footer section.
Sum It Up
Menu design is so important for your blog. A cluttered, overstuffed menu will turn off readers instead of hook them. So, skinny down your menu today.
Let’s review those 3 rules again:
1. Stick to tried-and-true menu locations
2. 4 – 7 menu links
3. No drop down menus
Find other ways to work your Archives and Categories like grid style page templates, handy archive search features and category widgets in the blog sidebar.
Now, time to download my handy dandy Menu Planner Worksheet. I’ve included the rules to keep you on track and, no, there is no room for drop downs.
Sign up for our Mailing List to get access to all of our Blogging Resources. You’ll get instant access to the Menu Planner plus access to our Resource Library.
For existing members, you know what to do.