Dynamic Navigation

(Lewis) #1

We’ve successfully built a dynamic navigation in the past, using nested asset listings but it introduced a major performance hit. Our menu structure is nested like:

image

We want to be able to print the title of A, but then only print the titles of AAA pages under it, skipping the AA level pages. Same for B and C groups too. On screen, we should end up with:

A
AAA
AAA
AAA
B
BBB
C
CCC
CCC
CCC

This way, when we move a page in the asset map, it’s automatically reflected in the site’s homepage navigation.

Any ideas of an efficient way to do it?

(Jsisk) #2

Have you tried using Server Side JS (SSJS) to achieve this?

You can program whatever you like the output to be and this might give you what you want.

https://matrix.squiz.net/manuals/concepts/chapters/server-side-javascript

If you are familiar with coding and using JavaScript, then this could be a great option, there’s even a tutorial here which deals with using SSJ and listing assets the might be really useful.

(Lewis) #3

Hi jsisk,

Thanks for your reply.
I am using SSJS (I did get some result using plain keyword replacements but I didn’t manage to achieve everything I needed).

I’ve cracked it now using SSJS but I’m now having performance issues. I’ve raised another topic to ask about ways to improve that.

(Bart Banda) #4

You should just be able to use the normal menu design area and not print anything for the 2nd level of menu assets: https://matrix.squiz.net/manuals/designs/chapters/menu-normal-design-area

(Lewis) #6

Morning Bart. Thanks for the reply!
What I didn’t mention in that original description was that I also need to only display the first topic from each bit of the sub-navigation, for a count of 4 per major heading. Erm … let me explain … so the ectual navigation typically looks like this:

Site
Major Heading
Minor Heading
Topic A
Topic A Chapter 1
Topic A Chapter 2
Topic B
Minor Heading
Topic C
Topic D
Topic E
Topic F
Topic G
Topic G Chapter 1
Topic G Chapter 2
Topic G Chapter 3
Major Heading …

What I actually need to do is print the Major Heading in each case, followed by up to four topic headings under each Major Heading. For example, on the homepage should appear:

Major Heading
Topic A
Topic C
Topic F
Topic G

Topics F and G above are direct children of the Major Heading.

… this pattern repeats for the following Major Heading and so on. The listing needs to exclude any chapters and just print the topic’s heading in each case, linked.

I’ve cracked it as I say with SSJS but if there’s a more efficient (my method is taking around 6 seconds to load the page at the moment) then I’d be grateful to hear your suggestions.

(Douglas (@finnatic at @waikato)) #7

In terms of performance for web menus, I’ve been thinking that what would be nice is if there was a way to have a listing push content as a static block (between updates) into the git bridge or similar.

That depends of course on the frequency of changes, and whether you want the dynamic content to refresh more often or you want a well performing website.

(Lewis) #8

Hi Douglas. I’ve been looking at Squiz’s content API too. Another idea is to direct users to a static HTML version of the page, generated using htaccess or a server block. Just a theory, have no idea if it would work and how the static markup would update when a change to the navigation occurred.

(David Schoen) #9

For mega-menus our best practice is generally to structure the menu in a way that it can be shared across pages using ESI (i.e all menu HTML is identical and any context is applied in JS/CSS or if essential esi:choose) and then use a cache that’s capable of stale-while-revalidate.

ESI allows the cache object for the menu to be shared across all pages and stale-while-revalidate allows the cache to continue to serve an old copy of a menu while updating it in the background.

(Lewis) #10

Hi Dschoen,
Thanks for your reply. I’ve forwarded your comment to our development team to investigate further.