Mega Menu Documentation - version 3.70 and below

Easy and effective navigation is essential to have your customers enjoy shopping from your nopCommerce store. With Nop Mega Menu you have advanced nopCommerce navigation managed right from your administration panel.

Live DEMO - see how the Nop Mega Menu plugin would look like in your public store.

Admin DEMO - see the plugin administration.

Working with the Nop Mega Menu is as easy as configuring a few settings from the administration of the plugin. When the plugin is installed it comes preconfigured with default values for the settings

SETTINGS SECTIONS

The Nop Mega Menu plugin settings are divided into four main sections as follows:

General Settings - Allows you to enable or disable the Nop Mega Menu plugin.
Mega Menu Settings - Allow you to configure what menu items to be included in the mega menu.
Category Menu Settings - Shown if the "Include categories" checkbox is checked. Allow you to configure the menu with the categories.
Manufacturer Menu Settings - Shown after the "Include manufacturers" checkbox is checked. Allow you to configure the menu with the manufacturers.

GENERAL SETTINGS SECTION

Enabled - If checked the Nop Mega Menu plugin will be enabled (this setting will enable the widget for the Nop Mega Menu plugin).
Enable click for dropdowns - If checked the Mega Menu dropdowns will show on click (not on hover as default).

MEGA MENU ITEMS SETTINGS SECTION

Here you can specify which items to be included in the Mega menu.

Include categories - If enabled a categories menu item will be included to the Mega Menu.
Include manufacturers - If enabled a manufacturers menu item will be included to the Mega Menu.
Include vendors - If enabled a vendors menu item will be included to the Mega Menu.
Include "Home Page" link - If enabled a "Home Page" link will be included to the Mega Menu.
Include "New products" link - If enabled "New products" link will be included to the Mega Menu.
Include "My Account" link - If enabled a "My Account" link will be included to the Mega Menu.
Include "News" link - If enabled a "News" link will be included to the Mega Menu.
Include "Blog" link - If enabled a "Blog" link will be included to the Mega Menu.
Include "Forum" link - If enabled a "Forum" link will be included to the Mega Menu. Please make sure that your forum is enabled from Configuration -> Settings -> Forum Settings.
Show Topics Body In Dropdown - If enabled each topic body will be showed as a drop-down of the menu item.
Set a Sticky category - Sets the category that will be always shown as an item in the top level of the menu.

CATEGORY MENU SETTINGS SECTION

In the Category Menu Settings section you can configure settings that are used by the categories menu.

NOTE: (Advanced users only) You can configure the way the categories are displayed, add products to the categories, ets., by editing the CategoryMenuTemplate.xxx views.

Show categories in a single menu - If checked the categories will be shown in a single menu. Otherwise each top level category will be shown in a separate menu.

NOTE: The bellow settings work only if Show categories in a single menu option is selected.
- Menu title - Set the title of the categories menu.
Category menu template - Choose a template for the categories in the MegaMenu. This template defines how the categories and their subcategories will be displayed.

NOTE: The bellow settings work only if Categories in grid(with pictures) option is selected from Category menu template setting dropdown.
- Categories image size (pixels) - Set the image size of the categories pictures (in pixels). If set to 0 the ThumbnailImageSize property, from nopCommerce, will be used.
- Maximum number of categories in category item - Set the maximum number of categories/subcategories that are going to be shown in a singte category item. If the maximum number is exeeded a "View all categories" link will be shown.
- Products image size (pixels) - Set the image size of the Featured products and Best Seller Products by category, that are populated in the Model. You can use them in the CategoryMenuTemplate views. If set to 0 the ThumbnailImageSize property, from nopCommerce, will be used.
NOTE: The bellow settings work only if Categories in list option is selected from Category menu template setting dropdown.
- Categories column title - Set the tilte of the column that contains the categories.
- Maximum number of categories in category item - Set the maximum number of categories/subcategories that are going to be shown in a singte category item. If the maximum number is exeeded a "View all categories" link will be shown.
- Include category manufacturers (when in columns) - If checked the category manufacturers, will be shown.
- Manufacturers column title - Set the tilte of the column that contains the manufacturers.
- Maximum number of manufacturers in category item - Set the maximum number of manufacturers that are going to be shown in a singte category item. If the maximum number is exeeded a "View all manufacturers" link will be shown.

MANUFACTURER MENU SETTINGS SECTION

In the Manufacturer Menu Settings section you can configure settings that are used by the manufacturer menu.

NOTE: (Advanced users only) You can configure the way the manufacturers are displayed, by editing the ManufacturerMenuTemplate views.

Menu title - Set the tilte of the manufacturers menu.
Manufacturer menu template - Choose a template for the manufacturers in the Mega Menu. This template defines how the manufacturers will be displayed.

NOTE: The bellow settings works only with Manufacturers in grid(with pictures) option selected from Manufacturer menu template setting dropdown.
- Manufacturer image size(pixels) - Set the image size for the manufacturers in pixels. If set to 0 the ThumbnailImageSize property, from nopCommerce, will be used.
NOTE: The bellow settings works only with Manufacturers in list option selected from Manufacturer menu template setting dropdown.
- Manufacturers title in the manufacturers menu - Set the tilte of the column that contains the manufacturers in the manufacturers menu item.
Maximum number of manufacturers - Set the maximum number of manufacturers that are going to be shown in a manufacturer menu item. If the maximum number is exeeded a "View all manufacturers" link will be shown.

VENDOR MENU SETTINGS SECTION

In the Vendor Menu Settings section you can configure settings that are used by the vendor menu.

NOTE: (Advanced users only) You can configure the way the vendors are displayed, by editing the VendorMenuTemplate view.

Vendors column title - Set the tilte of the column that contains the vendors.
Maximum number of vendors - Set the maximum number of vendors that are going to be shown in the vendors menu item. If the maximum number is exeeded a "View all vendors" link will be shown.

NOTE: Make sure that you have set the "Number of vendors to display" setting to value gratter than 0. You can set it from Configuration -> Settings -> Vendor Settings.

ADD TOPICS

Since nopCommerce v3.5 each created topic has setting Include in top menu. The Nop Mega Menu uses these settings and shows all topics that have this setting checked. In the Mega Menu Items Settings there is a setting which allows to show each topic body as a drop-down to the menu item(of course, if the topic is not password protected) - Show Topics Body In Dropdown.

You still can add more items to the menu. Also, we have left some commented code, which can be useful... Like code for showing all topics in a single item(in drop-down). Also, code for adding About Us and Contact Us menu items.

To add additional topics to the Nop Mega Menu you need to edit the MegaMenu.cshtml view.
Copy the following row:

@Html.Action("TopicBlock", "MegaMenu", new { systemName = "MegaMenuTopic", enableDropDown = !isMegaMenuResponsive })

paste it in the view where you want to see the topic and change the systemName to the system name of the topic that you want to be displayed. Note that the title of the topic will be used as a title of the menu item.