ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on January 3, 2014
randomcreative profile image

Rose is a full-time freelance writer who frequently writes about education, special education, DIY projects, food, Milwaukee, and more.


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.

Outside Links Vs. Blog Pages and How to Create Pages

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.

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.


    0 of 8192 characters used
    Post Comment
    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      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 profile image


      7 years ago from U.S.A.

      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.

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

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

    • profile image

      Splendid Little Stars 

      7 years ago

      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!

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      Thanks so much!

    • Peter Allison profile image

      Peter Allison 

      7 years ago from Alameda, CA

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

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      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!

    • thelyricwriter profile image

      Richard Ricky Hale 

      7 years ago from West Virginia

      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.

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      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 profile image


      7 years ago

      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.

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      You're welcome! I'm so glad.

    • Om Paramapoonya profile image

      Om Paramapoonya 

      7 years ago

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

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      Thanks so much Giselle!

    • profile image

      Giselle Maine 

      7 years ago

      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.

    • randomcreative profile imageAUTHOR

      Rose Clearfield 

      7 years ago from Milwaukee, Wisconsin

      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.

    • profile image


      7 years ago

      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

    • profile image

      Judy Nolan 

      7 years ago

      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!).


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)