How to create Menu Items for a menu?

After you have created a menu you need to create menu items that will appear when menu is expanded.

To create menu items, Menu Items Editor is used.

Menu Item Editor

 

  1. Menu Item Type – The type of Menu that you wish to create. There are five types of menus that you can create.
    • Simple Link – A simple link that can be clicked
    • Heading Link – A link that as as heading for a group of links. This is by default kept bold.
    • Grid Link – A link that be used to create a link that covers a cell in a grid. Note that the width of grid is controlled by the number of columns and column width in the parent menu.
    • Custom HTML – An item where you can insert any custom HTML including images. Choose this if you wish to create a menu which is born out of your creativity.
    • Full Image – This is used to create a menu link that’ll cover the entire column in which it is kept in. Make sure that height of image is same as the maximum height of expanded menu for best results.
    • Empty – A link that is used to create a space between two links. This link is not clickable.
  2. Menu Text – The text that will appear on the menu link. e.g. Home, Men etc…
  3. Hint Text – The text that appears when mouse hovers the link.
  4. Entity Name – The url where this menu will point to when clicked. There are four types of entities.
    • Category – To go to a specific category. Select the category from the dropdown.
    • Product – To go to a specific product. Enter the ID of the product.
    • Topic – To go to a specific topic. Enter the ID of the topic.
    • Custom URL – To go to a specific custom url. Enter the custom URL.

      If you select Category as Entity Name, you can check the option Create menu items for all child categories to automatically create child menu links for all the child categories.

  5. Image – Upload the image if you wish to show image instead of text.
  6. Display Image – Check to display images instead of text.
  7. Image Width – The width of the image.
  8. Image Height – The height of the image.
  9. Style – Styles that will be added to the menu link. You can use styles to change the look of menu.
  10. CSS Class – CSS class that will be added to the menu link. You can use CSS classes to modify the look and feel of the menu link.
  11. Column Position – The column where this particular link will be visible. The column position starts from 1.
  12. Display Order – The order of display menu.
  13. Visible – Specifies if the menu link is visible or not.
  14. Enabled – Specifies if the menu link is enabled or not.

Note: The options available may change depending on the Menu Item Type selected

After you have entered the information, click on Save button to save the menu item. A new menu item will be created in the grid above the editor.

To modify the existing menu go to appropriate menu in the grid and click Modify to perform the editing.