Implementation of menu drop-down within header nav

Squiz Matrix Support
1

Matrix Version: 6.45.0

Looking for a recommendation on how to implement a mega menu within the header_nav design area and have this update dynamically when a new top level asset is added.

I have implemented a flat html menu to our kb.ros.gov.uk site, but our corporate site ros.gov.uk works differently and not sure how to edit the header_nav design area.

I am struggling to understand how the design area work and how they are edited / customised so not sure the best way to go about this.

Thanks
Innes

2

Hey Innesz have you had a look at this online documentation?

Might be handy read…

Cheers
N

3

Hey Nicky,

Yes I have read the documentation but I am none the wiser to how these design areas work and how I would customise this to get the menu drop-down to update dynamically.

Innes

4

You can also use asset listings to acheive the same behavior.

In both options(design area or ALs), you require to finish the your offline designs(HTML, CSS and JS) for mega menu. Then it is easy to use anything.

5

Thanks Harinder.

I have all the relevant HTML, CSS and JS ready to use. Would you recommend an asset listing to achieve this?

At the moment the top nav bar is updated via an asset listing so this would be th preferred approach. How would I go about have a menu update automatically when a new page asset is added but also allow us to limit what appears in the drop-down?

Thanks

6

You can use mutiple asset listings to list all three levels for your mega menu. Or via SSJS to achieve similar behavior.

You can put a limit on third Asset listings to list limited assets as per your requirements.

7

Thanks very much Harinder, I will look into using these at the three levels to achieve the desired outcome.