Skip to main content

Blog Horizontal Navigation Bar: How to Create a Bar and What to Include


The Importance of Blog Navigation Bars

I recently redid a large portion of my blog design, which included adding a handful of tabs to my blog horizontal navigation bar. My Blogging Business Artisan teammates thought that this would make a good topic for an article for our team so I decided to write a hub about it. Although a navigation bar is not an essential tool for a blog, it can be very useful. My primary reason for updating my bar was to reduce clutter in my sidebar. I had let a lot of lists and icons build up that did not need to crowd a long side bar. I ended up making my blog format wider so I could add a second sidebar. I moved several components out entirely and split the rest up between the two side bars, greatly increasing the overall organization of my blog. This hub will give you the tools that you need to start building or reorganizing your navigation bar so your tabs are useful and your blog is well organized and clutter free.

Resources for Creating Bars in Blogger and Wordpress

Before you worry about what tabs you'll need or how you will organize them, you need to create a navigation bar for your blog. I'm including resources for Blogger and WordPress bars, as these are two of the most widely used blog platforms right now. Do not feel limited by these resources. There are other options available for different platforms.

Blogger: I got my code for a horizontal bar for Blogger from this blog post. This great hub explains a very similar method for creating a bar. The format is a little different for each, but the methods are almost identical. For both, you simply add an HTML/Javascript widget and don't have to go into the blog HTML.

WordPress: I do not use WordPress so I am not as knowledgeable about it, but it is fairly easy to set up a bar there as well. This post contains links for 5 great WordPress navigation menu tutorials. You can decide which one fits your blog the best.

Horizontal Vs. Vertical

Thus far, I have only referred to horizontal navigation bars. Currently horizontal bars are common place among blogs and web sites. The vast majority of tutorials and codes out there for bars are for horizontal ones. There are no readily available resources for creating vertical bars in Blogger or WordPress. If you want to go with this option, you will most likely have to create the code for it from scratch. If you use a web design program, such as Dreamweaver, you will be able to make the bar with your program, such as with this tutorial. There are a number of other CSS tutorials available as well.

You can create tabs for two different types of links: outside links or blog pages. There are any number of possibilities both types of links. Examples of outside links include other web sites that you have and social media pages. Blog pages can be any internal pages for your blog that are relevant for your readers such as information about yourself, resources for your readers, and contact information.

Creating Pages: Blogger

To create a new page in Blogger, click on New Post, then Edit Pages, then New Page. When you are ready to publish your new page, you will get several options for how to display your page. If you only want the page to show up in your navigation bar, check the No Gadget option. After you have published your page, link the URL for it in your navigation bar.

Creating Pages: WordPress

For all of the information and tutorials that you need to create pages in WordPress, check out this site.

Overview of My Tabs

Here are the tabs that I currently have in my blog navigation bar. They include both outside links and blog pages. For additional tab ideas, keep reading.

Home: It is always a good idea to include a home tab on your navigation bar. You never want someone to navigate to a new page in your blog and not know how to get back to the home page.

Etsy Shop: Even though I have a couple Etsy widgets in one of my side bars and link to Etsy items in my blog posts at least 1-2 times per week, I still get questions about where people can buy my jewelry online. Providing a link to the Etsy Shop in the bar decreases the number of these questions.

Facebook: My Facebook Fan Page consistently ranks in the top 5 traffic sources for my Etsy shop. I want to make sure that all new fans and blog followers "like" my page so I have the link front and center in the bar.

Twitter: I don't get nearly as many clicks from Twitter, but I'm also not as active there as I am on Facebook. Some people prefer Twitter so I like to have the link readily available. I primarily use Twitter for my business. If you only use your Twitter account for personal interactions, it may not be appropriate to include it on a business related blog or vice versa if you have a personal blog and a business Twitter account.

Mailing List: I use MailChimp for my mailing list, which has a URL for a mailing list sign up. The easier you can make it for people to sign up for your mailing list, the better.

Crafty Articles: When I started writing for HubPages, I linked crafty and other Etsy related articles in the side bar of my blog. Some 20+ crafty/Etsy hubs later, this section of my sidebar is completely cluttered. Not wanting to remove this from my blog entirely, I simply moved the articles into a separate page that is linked in the bar.

Etsy Seller Resources: This is another sidebar section that I have continued to expand as I've become more and more involved with Etsy. It is a simplified version of the hub that I linked here. It was another easy choice to move into a separate page and link to the bar.

PDF Patterns: Some of my most popular items on Etsy are my beading PDF patterns. Many people who read my blog purchase handmade items and even more of them make their own handmade items. I want to make my patterns prominent to this audience. For a long time, I only had a few patterns so it made sense to keep them in the sidebar. Now my larger pool of patterns are much better situated in a separate page with a link.

Scroll to Continue

Advertising: One of my newest efforts on my blog is to take in private sponsors who can pay a fee for a monthly ad spot on my blog. I created a tab for a page link that explains how this process works.

Other Ideas for a Navigation Bar

Here are some other commonly used tabs for navigation bars.

About Me: I choose to include my About Me information in the About Me section of the Blogger profile. When I did this recent blog rearrangement, I rewrote my bio and moved it to a top spot in one of my sidebars. It's important for people reading a blog to know a little background about the author. Instead of or in addition to the default About Me spot, some people choose to create a separate page for this information and link it in their bar.

Contact Information: Think about the information that your readers will need. For example, if you have a studio or shop where people can find your work or visit you in person, you may want to include this information in the contact page. However, if you primarily sell through an Etsy shop, it is most likely not appropriate to include your personal address and phone number.

Upcoming Events: This section is applicable to people in a number of different fields. Events can include fairs, shows, gigs, concerts, exhibitions, and more. At this time, I don't participate in enough craft fairs to warrant a separate page and tab link, but if I this ever changes, I will consider including this on my blog. If you do have a lot of in person events, your blog can be a great go to resource for people to see what you're up to this month.

Awards: Blog awards and other online recognitions can clog up blog sidebars. It's easy to put one or two up and keep adding without realizing that you have reached ten or more of them. Even if you haven't done this yourself, I'm sure you've seen blogs where this is a problem. Awards can be nice to leave up for a while, especially when they relate directly to your blog content, such as an award for being a great DIY blog. However, they don't need to clog up your main page.

Reviews: Sometimes people like to post reviews of their blog or some aspect of their business, such as reviews of shows or feedback on products. If you want to post more than one or two reviews, move them to a separate page and create a link.

Other Web Site Links: Obviously you won't use this title for this tab in your bar. If you want to link another blog or web site that you run or any other relevant web site, you can create a tab for it. Generally you can simply use the name of the given web site that you are linking as the tab title.

Other Resources: Again, you'll have to title this appropriately. If you have any other resources that you've created, you may want to create prominent links for them. For example, some bloggers develop blog buttons (i.e. e-mail, Etsy shop, etc.) that people are free to take. Make sure that your readers know how to find this great content.

Anything else that you'd like to see here? Let me know!

Final Tips

Make sure that your tabs are relevant for your blog, but don't be afraid to have fun, too. For example, f you've find a hilarious link that you feel the world needs to see, especially if it relates to your blog content, don't be afraid to create a tab for it. People enjoy seeing the person behind the blog come through in the content so keep your blog customized to your own interests and personality.

Additional Blog Resources


Rose Clearfield (author) from Milwaukee, Wisconsin on January 02, 2012:

I'm not a huge fan of vertical menus either, especially on blogs. It's good to know that there are a few good ones out there, though! Thanks for the tip!

themespotter from U.S.A. on January 02, 2012:

I'm not a huge fan of vertical nav menus, but there are a few good WordPress JQuery plugins out there that include well-designed vertical menus.

Rose Clearfield (author) from Milwaukee, Wisconsin on November 29, 2011:

You're very welcome, Margaret! I'm so glad that this was helpful for you.

Splendid Little Stars on November 29, 2011:

This is great! I just used this to add another page to my blog! I'm looking forward to adding more. Thanks so much, Rose, for this clearly written and helpful article!

Rose Clearfield (author) from Milwaukee, Wisconsin on November 22, 2011:

Thanks so much!

Peter Allison from Alameda, CA on November 22, 2011:

Nice tips on everything from web design to marketing your small business! Cool!

Rose Clearfield (author) from Milwaukee, Wisconsin on October 28, 2011:

Thanks! It can be overwhelming to learn the basics of blogging, let alone everything else, but if you take it one step at a time, you'll get there. Best of luck!

Richard Ricky Hale from West Virginia on October 28, 2011:

I am still trying to learn all of this stuff. This sounds very useful and hopefully I can do it right. Thanks for the advice. Well done and voted up.

Rose Clearfield (author) from Milwaukee, Wisconsin on October 27, 2011:

Thanks, Ingenira! I do make the beaded and button jewelry that I write about on my blog. Sometimes I feature work from other artists, but most of what you see there is work that I made.

Thank you! I agree.

Ingenira on October 27, 2011:

I checked out your blog, wow, the bead products are simply so beautiful. Did you make those yourself ?

The Blog Horizontal Navigation Bar is certainly a very neat way to get visitors to browse through your blog.

Rose Clearfield (author) from Milwaukee, Wisconsin on October 27, 2011:

You're welcome! I'm so glad.

Om Paramapoonya on October 27, 2011:

Thanks for sharing this. Very helpful! I'll certainly use some of your suggestions. :)

Rose Clearfield (author) from Milwaukee, Wisconsin on October 27, 2011:

Thanks so much Giselle!

Giselle Maine on October 27, 2011:

This is a great resource for blog owners! Thanks for your careful and clear description of how the horizontal navigation bar can be used, too.

Rose Clearfield (author) from Milwaukee, Wisconsin on October 26, 2011:

Thanks so much Judy and Deb!

I hadn't thought about moving the blog roll to a tab. Blogger defaults to showing 10 at a time with the option to click to see more, which keeps the list from cluttering things up too much. I'm glad that WordPress has some good options for horizontal navigation bars. I know what you mean about HTML code!

I usually click on the titles when I visit blogs, too. Not everyone knows to do that, though.

storybeader on October 26, 2011:

What a great post and so many resources! I don't have a "Home" key on my blog - I usually click on the title... Lots of things to think about! Thanks {:-D

Judy Nolan on October 26, 2011:

These are great suggestions, Rose. Another page to add to the navigation bar is for a blog roll, which can also clutter your side bar, the longer it gets. I use Wordpress, by the way, and you can usually select a template that builds a horizontal navigation bar into it. This is especially helpful when you only know enough HTML code to be dangerous (speaking of myself!).

Related Articles