• Navigation bar is a very effective user interface of your web store that provides an easy and visually interesting way for visitors to navigate between the main sections of your web store. It helps your visitors to navigate through multiple levels in your store structure.

  • Navigation bar guides users to pages beyond the homepage, and it’s the singular tool to give users a sense of orientation.

  • Navigation bar is a more convenient, customized alternative to a browser's Back and Forward buttons. A navigation bar includes text, images, or animations that are displayed as buttons that link to other sections or pages.

  • So, it’s very important to adhere to time-tested design and usability conventions. Doing so will give your users a comfortable and easy reference point to fully engage with your content.

  • You can create Navigations (Navigation bars) exclusively for your different 'Business Channels' such as Web store/mobile store/JumboTen Store and so on…

  • For each 'Business Channels', you can also create multiple Navigations (Navigation bars) as per your requirement, but only one Navigation Bar from each channel can be in active mode at any point of time.

  • You can design and display the 'Navigation Bars' in the following ways by defining the Templates:
  • Tab Navigation
  • Pull down Navigation
  • Multi Column Navigation
  • Vertical Navigation
  • You can create Navigations (Navigation Bars) in two types:

    • Main Navigation - These are normal Navigation Bars and are used for main navigation of the store.
    • Sub Navigation - The ‘Sub Navigation Bars’ can be associated to the menu items of 'Main Navigation Bars' so that when those menu items are clicked, then the associated 'Sub Navigation Bar' will be displayed.

Tab Navigation


1. Tab Navigation:


Tab Navigation

  • Tab navigation is also a commonly used navigation method by different websites for ease of browsing.

  • When a visitor clicks on the Parent navigation tab, a sub-menu of navigation items appears.

  • Tab Navigation supports only two levels of navigation. If you click the first level navigation (i.e. main) menu, then the second level menu(s) will be displayed.

  • Tab navigation clearly indicates current location. Active tabs can be highlighted by color, size, and font among other things. You can use this to differentiate them from inactive tabs.

  • Tabbed navigation makes it easier for the visitor to identify:
    • Current location
    • Where else can the user go?
    • What else is there to browse?


2. Pull down Navigation:


Pulldown Navigation

  • Pull down navigation, also called as Drop down navigation is great for sites that have multiple levels of content hierarchy. The typical design pattern of a Pull down menu is that, when a user mouseovers on the parent navigation tab, a sub-menu of navigation items appears.
  • If you mouseover on the first level navigation menu, then the second level navigation menu only will be displayed but not the third level navigation menu.
    In the figure, we have mouseovered on the second level navigation menu i.e. Computer Peripherals and hence the third level menu also displayed.
  • In Pull down navigation, only 2nd level navigation menu will be displayed if cursor is placed on first level menu item and the 3rd level menu will not be displayed until and unless the cursor is placed on the respective second level menu.

    The 3rd Level Navigation menu will be displayed at the same position of 2nd Level, where the cursor is positioned.
  • These menus saves lot of space space, you can include maximum sub-categories in the navigation bar and use the space left for better content area.
  • The Pull down navigation makes it easier for your visitors to find their way around your site.


3. Multi column Navigation:


 Design Web Pages

  • In Multi column navigation, you can display pages in multi columns of 'sub-menus' or 'sub sub-menus' under a 'Main Menu' in a tabular form. This is like a 'multi-level Pull down menu'.
  • Multi column navigation menus are great for sites that have multiple levels of content hierarchy. The typical design pattern of a 'Multi column Navigation Menu' is that, when a user mouseovers the parent navigation item (Main Menu), a submenu/sub-sub menu of that main menu items appears in different columns.
  • In Multi column navigation, If you mouseover on the first level navigation menu, then the second level navigation menu as well as the third level navigation menu (if any) will be displayed in defined number of multi coulmns.

    That is, here all navigation menus (i.e 2nd, 3rd and leaf levels) will be displayed if cursor is placed on first level menu item in defined number of columns. All columns will be positioned below the main navigation bar.
  • These menus saves lot of space space, you can include maximum sub-menus, sub sub-menus in the navigation bar and use the space left for better content area.


4. Vertical Navigation:


 Design Navigation Bar

  • It's the combination of 'Pull down Navigation' and 'Multi Column Navigation' with a added advantage of displaying the image associated to the selected menu item.
  • In Vertical Navigation, only 2nd level navigation menu will be displayed if cursor is placed on first level menu item and the 3rd level menu will not be displayed until and unless the cursor is placed on the respective second level menu (as in the case of 'Pull down Navigation').

    The 3rd Level Navigation menu will be positioned below the main navigation bar (as in the case of 'Multi column Navigation').
  • You can add and display required images to the menu items of Vertical Navigation.

Let's learn the different process in designing the Navigation Bar:

Do It Yourself:

Learn More:


learnmore2.jpg
1. Only 4 levels of Navigation (Example: Main Category (1st Level), Sub Category (2nd Level), Sub Sub Category (3rd Level) and Leaf Level Category (4th Level) ) is possible in navigation.

nav0.jpg

2. Tab Navigation supports only two levels of navigation. If you click the first level navigation (i.e. main) menu, then the second level menu(s) will be displayed.

3. Images can be given to only for Vertical Navigation