How do I create a 'tab navigation bar (tab navigation menu)' for my web store?


To create a tab navigation bar (tab navigation menu) for your web store, do the following:

Creating a tab navigation bar:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Design Navigation Bar

  • You will be navigated to the 'Dashboard' page.


 Design Navigation Bar

  • Click the  Design Navigation Bar icon. The Design & Content section will be displayed as shown in the figure.


 Design Navigation Bar

  • Click Design Navigation. You will be navigated to the Design Navigations page.


 Design Navigation Bar

  • You can find the list of available navigations under the List of Navigations section.
  • To create a new navigation, click Add New Navigation. You will be navigated to the Add/Edit Navigation page.


 Design Navigation Bar

Add/Edit Navigation:

  • Select the type of navigation as the Main Navigation from the Type of Navigation drop-down.
    • Note:
      • 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 for the menu items of the 'main navigation bars' so that when those menu items are clicked, the associated 'sub-navigation bar' will be displayed.
  • Enter a title for the navigation (for your reference) in the Name of Navigation text box.
  • Enter a reference code for the navigation (for your reference) in the Reference Code text box.
  • To create a 'Tab Navigation', select Tab Navigation from the Template drop-down.
  • To create the navigation for your web store, select Web Store from the Channel drop-down.

Note:

  • To create the navigation for your mobile (WAP) store, select Mobile Site from the Channel drop-down.
  • To create the navigation for your JumboTen store, select Jumbo Ten from the Channel drop-down.
  • To make the new navigation active, select the Active radio button of the Status parameter.
    • Note: For each 'business channels', you can create multiple navigations (Navigation bars) as per your requirement, but only one navigation bar from each channel can be in the active mode at any point of time.

    • That means, if you make this new navigation active, the previously active navigation for the respective business channel will be deactivated automatically.


Displaying the navigation menu items only if they are having the products:

  • You can also display only those menu items which have products. To do so, select the Yes radio button of the Show only menu items which have products parameter.
    • Note: This is applicable only to the CategoryBrand pages. That means, if these pages are not having products, the respective page links also will not be displayed through the respective navigation set (bar)
  • Note:
    • If the Yes radio button is selected, and there are no products in some of the 'sub-navigation menu items (links)', those sub-navigation menu items (links) will not be displayed in the corresponding parent navigation menu item.

    • If the Yes radio button is selected, and there are no products in all of the 'sub-navigation menu items (links)' of a parent navigation menu item, the parent navigation menu item also will not be displayed along with respective sub-navigation menu items (links).

    • If the Yes radio button is selected for a navigation set (bar) and that navigation set is selected in a 'Category Menu' 'Drag & Drop Control' (i.e. through the 'Nav Menu' tab), the sub-navigation menu items (links) that are not having any products will not be displayed. If all the sub-navigation menu items (links) of a parent Navigation menu item are not having products, the parent navigation menu item also will not be displayed along with the respective sub-navigation menu items (links).
      Please Refer: Category Menu
  • To save the configuration (i.e. to create the 'Tab Navigation Bar'), click Save. Your configuration will be saved (i.e. Tab Navigation Bar will be created) and you will be displayed a Add new Menu Items dialog box. Now you can add the 'menu items' (Links) to the newly added 'Tab Navigation Bar'.
    • Note:
      • i) For adding menu items to the navigation bar for the first time, you can also navigate to the Add new Menu Items dialog box after clicking the ' Design Navigation Bar' icon of the respective navigation under the List of Navigations section in the Design Navigations page.

      • ii) If you have already added menu items, and you want to add few more menu items (in the root) to the same navigation bar, you can navigate to the Add new Menu Items dialog box after clicking the ' Design Navigation Bar' icon of the respective navigation under the List of Navigations section in the Design Navigations page and clicking the Add new Menu Item button in the Add/Edit Menu Items page.


 Design Navigation Bar

  • An example of the Tab Navigation is shown in the figure:
    Note: This figure is just a demo and doesn't represent the above configuration.


 Tab Navigation

Adding the menu items (Links) to the tab navigation bar:

  • Here, you can add menu items (Links) to the newly created 'Tab Navigation' Bar.
    • Note: You can add menu items (Links) to the both 'main navigation bar' and 'sub navigation Bar.'
  • There are different types of menu items you can add to the tab navigation bar namely:
    • Categories
    • Pages (Custom, Section and Standard Library pages)
    • Internal or External Page Links
    • Sections (i.e. 'Blank Custom Titles' under which you can add other menu items)
    • Brands
    • Product Groups
    • Product Tags

i) Adding the 'categories' to the navigation bar:


 Design Navigation Bar

  • By default, the 'Categories' tab will be opened in the Add new Menu Items dialog box. Expand the root and select the required category (categories).
  • If you have selected a single option (category), you will be displayed the available options in the Manage Display of Menu Item section.
    • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
  • The selected category name will be displayed in the Link name text box.
  • You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if the sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when a menu item is clicked, select the checkbox Open in New Browser.
  • To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar section in the Add/Edit Menu Items page.


 Design Navigation Bar

ii) Adding the 'pages' to the navigation bar:

  • To add the custom, section and standard library pages of your store to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add the custom, section and standard library pages to the navigation bar through the Pages tab.
  • Click Pages. The Add Custom/ Section/Standard Library pages section will be displayed.


 Design Navigation Bar

  • All the 'custom, section and standard library pages' are listed in this section. Select the Page ID(s) that you want to add to the navigation.
    • Note:
    • You can view the pages by clicking the View Page link under the URL column.
    • You can search the 'page titles' or 'page ids' by clicking the respective 'filter items' ' Design Navigation Bar' icon. You will be displayed a Show items with value that: dialog box.


 Design Navigation Bar

  • Select the search condition from the drop-down having the options: Is equal to, Contains, Does not Contain*
  • Enter the respective search criteria (i.e. Page ID, Page Title) in the text box.
  • Click Filter. The respective 'page id, page title' will be searched (if any).
  • If you have selected a single option (page), you will be displayed the available options in the Manage Display of Menu Item section.
  • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
  • The selected page name will be displayed in the Link name text box.
  • You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
  • To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

iii) Adding 'internal or external page links' to the navigation bar:

  • To add the Internal or External Page Links to navigation bar, click Add new Menu Item button in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add the internal (from your own store) or external page links(from web) through the Link Name tab.
  • Click Link Name. The Add External or Internal Page URL section will be displayed.


 Design Navigation Bar

  • Enter the URL of the page link in the Link URL text box.
  • Enter the name for this link in the Link Name text box under the Manage Display of Menu Item section. The name that is mentioned in the Link Name text box will be displayed in the storefront against the internal or external page link.
  • Enter the number of columns in which the menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of the 'link name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
  • To add the selected internal or external page link, click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected internal or external page link under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

iv) Adding the 'sections' (i.e. 'Blank Custom Titles') to the navigation bar:

  • To add the sections (i.e. 'Blank Custom Titles' under which you can add other menu items) to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add the sections (i.e. 'Blank Custom Titles' under which you can add other menu items) to the navigation bar through the Section tab.
  • Click Section. The Add Section (Blank) Menu Items and Manage Display section will be displayed.


 Design Navigation Bar

  • Enter the name of the section in the Section Name text box. The name that is mentioned in the Section Name text box will be displayed in the storefront against the 'Section Link'.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if the sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Section Name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To add the 'section' or 'blank custom title', click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

v) Adding the 'brands' to the navigation bar:

  • To add the brands to the navigation bar, click the Add new Menu Item button in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add brands to the navigation bar through the Brands tab.
  • Click Brands. The Add Brands section will be displayed.


 Design Navigation Bar

  • All the brands of your store are listed in this section. Select the required brand (s) that you want to add to the navigation.
  • If you have selected a single option (brand), you will be displayed the available options in the Manage Display of Menu Item section.
    • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
  • The selected brand name will be displayed in the Link name text box.
  • You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
  • To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

vi) Adding the 'product groups' to the navigation bar:

  • To add the product groups to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add product groups to the navigation bar through the Groups tab.
  • Click the Groups tab. The Add Product Groups section will be displayed. Select the required product group(s).


 Design Navigation Bar

  • If you have selected a single option (product group), you will be displayed the available options in the Manage Display of Menu Item section.
    • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
  • The selected name of the product group will be displayed in the Link name text box.
  • You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of the 'link name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
  • To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

vii) Adding the 'product tags' to the navigation bar:

  • To add the product tags to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
  • You can add product tags to the navigation bar through the Product Tags tab.
  • Click the Product Tags tab. The Product Tags section will be displayed. Select the required product tag(s).


 Design Navigation Bar

  • If you have selected a single option (product tag), you will be displayed the available options in the Manage Display of Menu Item section.
    • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
  • The selected name of the product tag will be displayed in the Link name text box.
  • You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
  • Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
  • Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
  • Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
  • To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
  • To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.


 Design Navigation Bar

Learn More:


learnmore2.jpg
1. The tab navigation supports only two levels of navigation. If you click the first level navigation (i.e. main) menu, the second level menu(s) will be displayed.

 Design Navigation Bar

2. The menu items of the Sub Navigation bar will be displayed as shown in the figure when the associated menu item of the main navigation bar is clicked.

 Design Navigation Bar