How To Ace Your Navigation Bar

In this post, I am going to look at the importance of effective website navigation.

It is easy to get overexcited when planning a new website. You just have all this great stuff to share - it can be tricky to know what to prioritise. 

Should you highlight your About page to show your brand’s personality? Should you put your products and services front and centre?


What about your blog? Your fees? Your FAQs? Your contact details?



It is at times like these - when you are feeling overwhelmed by your website content - that you become really thankful that some clever person developed website navigation bars.  

Navigation Bars

Could you imagine an online world without website navigation bars? They just make our lives so much easier. They enable us to find the content that we want quickly and easily.

If we go down the rabbit hole of content on a particular website, we know that the navigation bar is there to transport us back to where we started.

Navigation bars are also a crucial part of website design. The style and location of a  navigation bar is one of the first design building blocks I focus on when creating a new website.

There are several design options. For example, you can place your navigation bar:

  • At the very top of your website, before your main image
  • Below your main image or logo
  • In the left or right hand margin
  • Floating at the top of your website page and following you down as you scroll 
  • Behind an icon so that it seems invisible

The key thing to bear in mind is ease of access. You want to make things as easy as possible for your visitors. If they can’t find what they want - and quickly - they will simply click away from your website.

Similarly, if your website visitors find it hard to get back to your homepage (or any of your key pages) they will become frustrated and click away. 


Examples of Navigation Design

Floating Bar At The Top Of A Website
Floating Bar At The Top Of A Website
Bar At The Very Top Of A Website Page
Bar At The Very Top Of A Website Page
Floating Bar Moves With You As You Scroll Down
Floating Bar Moves With You As You Scroll Down
Bar At The Top Of A Page Next To A Logo
Bar At The Top Of A Page Next To A Logo
Bar Below Image Or Logo
Bar Below Image Or Logo
Bar As Part Of Main Website Image
Bar As Part Of Main Website Image

Navigation Bar Design

A few years ago, it was all the rage to have quirky navigation bar designs. For example, if you had a bakery website you would have cute little cake icons in your navigation bar. Or your navigation bar would live inside a mixing bowl.

In addition, some websites favoured navigation bars with lots of bells and whistles. Some bars moved when you hovered your mouse over them, some icons changed their shape or colour and some made funny sounds.

In my opinion, some of these navigation bar designs worked and some didn’t. To be honest, I much prefer a simple, yet stylish bar - and that goes for my navigation bars too!

Anatomy Of Navigation 

Once you have decided on the best location for your navigation bar, it is time to select the pages that you want to feature.

This is not always as easy as it sounds.

I have had many conversations with clients who want to put all of their web pages in their navigation bar. Then, before you know where you are, you have a bar that runs two or three lines long. 

It is crucial to avoid overwhelming visitors with information.

I tend to use a department store as a useful analogy. If you visit a department store you need to select the floor that you need. If that store had a lift/elevator button for absolutely everything it sells, you would soon feel overwhelmed with choices and perhaps even leave to find somewhere simpler.

This is why many stores have a floor dedicated to one, more general, topic. Home ware, for example. Once you have arrived on this floor, you will then be offered other, more specialist options - cushions, bedding, crockery etc.

You will also notice that wherever you go on this floor, there will be signs pointing you back to the lift/elevator so that you can access other parts of the store.

In the same way, you should keep your website navigation simple by:

  • Making sure your navigation bar occupies a prominent position on every web page
  • Only offering a select number of key navigation points so that these choices fit comfortably on one line
  • Using links, buttons and drop down menus within your web pages to help your visitors access more, specific information 
  • Implementing a ‘scroll to top’ button onto your website so that your visitors can return to your navigation bar easily.

So what should you include in your main navigation bar? Here is what I advise my clients:

  • Home - the page that your visitors are most likely to start from and the one you want them to find again easily
  • About - you need a page that allows your visitors to find out more about you and your brand’s unique personality
  • Products / Services - this page describes (in general terms) what you and your business has to offer. On this page you can then include buttons, images and links that can take your visitors to other web pages with additional information
  • Blog / News - if you have a blog or news page, it is crucial that you highlight it in your navigation bar
  • Contact - you want to offer your visitors multiple opportunities to get in touch. One of these should be in your navigation bar

In addition, to these core navigation bar features you could also add:

  • FAQs
  • Rates
  • Online Stores
  • Testimonials
  • Blog Archives
  • Tutorials

The exact anatomy of your navigation bar will, of course, depend on your own business and website design. However, always remember, simplicity is the best policy.

Thanks for reading! I hope that you have found this post useful.

Take care, Jane

Write a comment

Comments: 9
  • #1

    custom essay writing help (Monday, 31 July 2017 07:04)

    Thank you very much for your post, it makes us have more and more discs in our life, So kind for you, I also hope you will make more and more excellent post and let’s more and more talk, thank you very much, dear.

  • #2

    write my assignment for me (Tuesday, 19 September 2017 12:53)

    If your device went through the application's trying and it appeared to be good, you would now be able to redo your route bar. You have various choices for doing as such, and can set the catch design to standard, minimal, left or right situated, and tablet mode. You can likewise include a clipboard, a key code, and a console switcher to supplant or sit next to your home catch to additionally modify your device.

  • #3

    Write My Essay Cheap (Thursday, 21 September 2017 14:33)

    These are some fabulous tips about maintaining good navigation bar, never seen such type of explanation before, my research on designing has simply come to end after reading this particular blog, I have concluded all my stuffs and now I'm moving towards my next plan and that is to design now.

  • #4

    assignment help service (Friday, 22 September 2017 12:44)

    Apologia science is good for high school. They offer several different subjects like biology, general science, and chemistry. I've also used science books in the God's Design series. You can get both online from Rainbow Resource.

  • #5

    buy assignment online (Monday, 09 October 2017 09:48)

    From fancy navigation styles to colorful highlighted colored navigation things have evolved a lot and now one can feel the elegance and simplicity in website navigations and actually its a the correct and right way of designing navigation because when you overdo it "navigation" itself finds it hard to navigate.

  • #6

    custom subject assignments (Thursday, 12 October 2017 08:37)

    Some really useful tips for working with the navigation bar. It really helps to make it easier for us to create the results we had wanted. If that is something you want. It is also essential that you make it simple for people to reach out for things other than making things simple.

  • #7

    Flamingo Video - White board animation (Thursday, 12 October 2017 11:40)

    In this day and age, every business needs a website even if it's an extremely simple, inexpensive website because that is the first place customers will appear to see what you're about.

  • #8

    AVG 2018 (Monday, 23 October 2017 09:01)

    <a href="">AVG 2018</a>
    <a href="">mozilla firefox 2017</a>

  • #9

    dissertation Writing Service (Monday, 18 June 2018 07:08)

    Quality read. I located you weblog of Google and i hold thy page bookmarked regarding my private examine list! I’m a fan concerning you Website. Keep upon the tremendous work