4 Important Considerations When Designing Your Blog’s Navigation Menu

By Melissa Culbertson

The navigation menu is an important aspect of your blog’s overall design. An effective navigation menu for your blog not only improves the visitor experience, but it also helps illustrate who you are and what your blog is about. There are four main considerations you should examine when deciding on a design for your blog’s navigation menu.

1Blog navigation menu design consideration #1: colors

You’ve probably already chosen the colors and fonts for your overall blog design. When it comes to your navigation menu, however, the colors and font you select shouldn’t hinder the menu’s ability to aid in navigating a visitor to elsewhere in your blog.

The blog Simply Vintagegirl uses a single-colored navigation menu along with Times New Roman font. The yellow bar signifies a division from the header and the content, while the font choice makes the menu easy to read.

When selecting a color or colors to use for your menu bar, choose ones that complement your overall design. This might mean using a color you used within a certain design element or going with a neutral color like gray. Even no color at all might work if you want a simple look.

For each menu item, make sure the text and the background contrast so that the titles are legible. For example, using light green titles on a white background might not contrast enough, but dark green titles on a light green background might look just perfect.

2Blog navigation menu design consideration #2: fonts

When selecting fonts, simple works better. Here are two common mistakes in navigation menu fonts:

  • Too thin: A really thin font makes the words hard to read, especially because navigation menus often use smaller font sizes. Choose fonts that don’t disappear into your background. Sometimes a thin font can still work if the background color provides enough contrast.

  • Too fancy: A heavily scripted font or a font with lots of flair can be overbearing on a navigation menu. You want your menu to be readable but not take away the focus of your header or blog content. No matter the type of font, make sure it’s easy to read in smaller font sizes.

3Blog navigation menu design consideration #3: spacing

Aside from font and color, watch that your navigation menu titles don’t run together and confuse your visitors. Notice here the confusing spacing between the words. Is it About and My Photos, or About My Photos? Adjust the padding between menu items to fix this problem.

To change your fonts and colors, you can often amend your theme or template’s settings. If not, you can make these changes, as well as adjust the padding, in your style.css file.

To find the exact code to adjust your menu and the code’s location, use Firebug. You can also play around with color and font changes before you actually make them.

4Blog navigation menu design consideration #4: menu images

When done effectively, adding images to your navigation menu can add flair to your blog design. Sometimes using a little image to the left of each menu tab simply becomes another place to tie in your overall blog branding — in other words, simply for good looks!

However, images can also play a more functional role by adding more context to a menu item title. For example, an image of a plane beside a Where to Go tab helps readers better understand where that link takes them.