e-Learning Design: Navigation Styles

You’re designing an e-learning course and you’re wondering how you should set up your course navigation… the good news is there are more options available to you than just the standard left-hand menu and your typical next/back buttons. This isn’t to say that there’s anything wrong with using the left-hand menu and the next/back buttons — there isn’t. In fact, I think it’s usually a good idea to stick with what people are used to because it means your learners won’t have to guess about how to navigate or where to click. People have certain expectations about how they should be able to navigate an e-learning module (influenced greatly, I believe, by how they navigate websites) and if you deviate too much from the norm, it could lead to confusion!

Here is a list of 6 navigation styles you can use in your e-learning projects with some tips and info about each one. I’ve also included a published course that I developed  featuring an example of each nav style, to help you get inspired.

Horizontal Navigation

  • Commonly used navigation style in web design.
  • Drawback to using horizontal nav is that you can only display a limited number of links horizontally (probably 5-8, depending on text size and number of characters), so this might not be the best option for complex courses with a lot of information.
  • A drop-down sub-menu can be used to link to additional information.

Vertical Navigation

  • This is the menu style that is most often used in e-learning courses. Adobe Captivate, Articulate Presenter and Storyline, Lectora and Oracle UPK are all authoring tools that display a menu/table of contents on the left-hand side by default.
  • As with the horizontal navigation, a drop-down sub-menu can be used to link to additional information.
  • Limit the number of links you use in your vertical menu or it can become overwhelming for users.
  • Interesting fact: according to usability study on navigation patterns vertical navigation bars on the left performs better than vertical navigation bars on the right.

Horizontal and Vertical e-Learning Navigation

Tabbed Navigation

  • Tabs are popular in web design and are usually used horizontally.
  • Tabs can also be used vertically, but be careful because this might make it difficult to read the text.
  • They make navigation intuitive because people are used to seeing tabs to navigate (in filing systems, notebooks, binders, etc.).

Next/Back Navigation

  • Next and Back buttons are standard in e-learning courses. Even when you want to avoid boring, linear, “click-next” style courses… you sometimes still need to use a next and back button!
  • These buttons are often used in conjunction with another type of navigation (vertical menu, horizontal nav, etc.).
  • Arrow icons are often used to add a visual cue of going forward and backward.


Breadcrumb Navigation

  • Breadcrumbs are used as a secondary form of navigation and not as the primary nav.
  • They are used to show a learner where they are in an e-learning course; they orient learners when there are multiple layers of navigation.
  • Interesting fact: breadcrumb navigation gets its name from the fairy tale Hansel and Gretel, where they leave breadcrumbs along their journey, so they can find their way home.

Grid Style Navigation

  • Usually created with images, although it could be shapes and text as well.
  • Good option for a main course menu and for courses that have visually rich content.


I hope this post has given you some ideas for how you want to set up the navigation in your next e-learning project. Here are a few links to some great resources that helped me write this post:

13 thoughts on “e-Learning Design: Navigation Styles

  1. Cedric Smith says:

    Great post Nicole and right on time! It’s funny, because I was in the middle of creating a navigation menu when I received the email notice about this post. This is great food for thought when in the initial stages of planning an e-Learning course. Thanks for sharing!


    • Nicole Legault says:

      Cedric I always appreciate your comments… and so glad this post was timely for you!🙂

  2. brucuk says:

    Lovely use of colours – ties everything together in a beautiful, congruent way. Love the way that you cut off/hide some of the images. Some people seem to have a need to show the entire image, but it is so much better when you sometimes do this.
    Lovely work.

  3. kumikob says:

    I love your posts; they are so inspiring. I checked the resources links, and they are also great. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s