AEM top navigation with mega menu dropdown

Question

I'm working on a migration project for a client, they have a lot of custom components that they've relied on in the past for site construction that they won't have access to after the migration. Among those is their main site navigation, a header component that uses mega menus for site navigation. I want to know what options are available for recreating that functionality in the modern AEM landscape. Are there any good tutorials for how to writer a mega menu component? Are there any vendors that sell or license these sort of components?

Harwinder-singh · Accepted Answer

@drewcarbory For Header/footer section, you might want to use an Experience fragment that is then added to your base page template so that the header/footer shows up on all the pages and there is just one place to maintain it (the experience fragment).

As for Mega menu, this needs to be a custom component and AEM does provide you with all the tools/frameworks necessary to build any type of menu component.

You can refer to the below articles for additional guidance :

https://aem-development.com/knowledge-base/crafting-a-mega-menu-component-in-adobe-experience-manager-aem/#:~:text=A%20mega%20menu%20is%20a,scripts%2C%20and%20testing%20the%20component.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/top-navigation-mega-menu-component/m-p/244243

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-develop-mega-menu-component-so-that-we-have-colcntrl/m-p/166015