Need Help With Creating The MegaMenu in Kentico13

Surender Bollam asked on September 19, 2023 10:42

As part of our upgrade, we have successfully written logic to populate a dropdown menu that calls the linked pages based on their page type. This feature is working as expected.

However, we are now looking to implement a Mega Dropdown Menu that can display these page types in a more user-friendly and visually appealing manner. We understand that the Mega Dropdown Menu is a more advanced feature, and we are unsure if we need to write a separate logic for this.

Could you please provide us with guidance on how to implement the Mega Dropdown Menu functionality for our page types? Additionally, if there are any specific resources, documentation or examples so that we can refer.

Recent Answers


Brenden Kehren answered on September 19, 2023 18:38

I'd highly recommend creating a NavigationItem page type. This will allow you to build your navigation independent of your content tree. It will also allow you to manage the properties you need for naviation independent of the actual pages. While it may be redundant, it gives you a lot more control over your complex mega menu scenario.

0 votesVote for this answer Mark as a Correct answer

Surender Bollam answered on September 25, 2023 12:16 (last edited on September 25, 2023 20:08)

Thank you, Brenden Kehren!

We've implemented the NavigationItem page type as you recommended, and it's helped us create drop-down menus successfully. However, we're facing some challenges in achieving the mega-menu functionality we need. Could you please provide us with the necessary documentation or an example to help us achieve the mega menu?

0 votesVote for this answer Mark as a Correct answer

Surender Bollam answered on September 25, 2023 18:03 (last edited on September 25, 2023 20:07)

@Brenden Kehren

Thank you We've implemented the NavigationItem page type as you recommended, and it's helped us create drop-down menus successfully. However, we're facing some challenges in achieving the mega-menu functionality we need. Could you please provide us with the necessary documentation or an example to help us achieve the mega menu?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on September 25, 2023 18:58

What's your "complex mega-menu functionality"? Need more details to be able to provide any further assistance

0 votesVote for this answer Mark as a Correct answer

Surender Bollam answered on September 26, 2023 12:44 (last edited on September 26, 2023 12:45)

After creating the page types with subpages (i.e., subpages are showing as dropdowns in the main page type), the menu dropdown is working as expected.

Now that we are required to have the MegaMenu functionality to have a megamenu, do we need to have a separate logic? We are not sure how to implement this megamenu. Can you please guide us with the details of the steps, or is there any documentation related to the megamenu?

Note: We require this megamenu because we are trying to show the separate page types in the megamenu.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on September 26, 2023 15:51

Again, maybe try being specific as to your actual needs. What functionality? What design?

Every "megamenu" is different based on client requirements. The mega menues we've done typically have 3 to 4 levels of navigation. The page type definition has several properties:

  • PageName - system reasons
  • NavName
  • NavUrl
  • NavImageUrl
  • NavTarget
  • NavText

Then in your view after you've retreived those items from the content tree (be sure to include node level and node order), you add some logic to get level 1 items, level 2 items, level 3 items, etc. Additionally add some logic for fields, for example if there's a value in the Image URL field, then place the <img> tag.

Aside from that, you'll have to provide a lot more details as to what you need from functionality standpoint if you want more details.

0 votesVote for this answer Mark as a Correct answer

Surender Bollam answered on September 27, 2023 14:11

Hi Brenden we are actually looking to design our megamenu as shown below we want to add images or videos with description : link text

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.