Menu & Submenu Looper Provider

[splaquet]

Are there any more docs on using the Menu Looper provider?

I’m having an issue pulling only the submenus where I want them. As you can see in the screenshot, it pulls from the 1st level nav items a second time, then puts out the sub-menu items.

I’m trying to create an ADA compliant mega menu that resembles the menu on this site.
https://bradleyairport.com/journey/

I used this YouTube video for reference, the best I could:
https://youtu.be/8_VsXYSlHH4

https://bradleyairport.com/about/contact/security
password: themeco

[ruenel]

Hello @splaquet,

Thanks for writing in!

Your element structure would be something like this:

Div - Looper Provider Menu [select your menu]
    Div - Looper Consumer
        Button element 
             {{dc:looper:field key="title"}} displays the menu title
        Div - Looper Provider Dynamic Content  {{dc:looper:field key="children"}} [to display the sub menu items]
            Div - Looper Consumer
                Button element 
                    {{dc:looper:field key="title"}} displays the sub menu title

Based on this structure, you will something like:

Div
   Div
      Button - Menu Item 1
   Div
      Button - Menu Item 2
      Div
          Div
              Button - Sub Menu Item 1
          Div
              Button - Sub Menu Item 2


   Div
      Button - Menu Item 3
   Div
      Button - Menu Item 4

Hope this makes sense.

[splaquet]

That does make sense. I was thinking “menu component”, because it’s a menu. I didn’t really stop to consider that you don’t need a menu when you’re looping through.

Thank you!

[prakash_s]

You are most welcome, @splaquet

[splaquet]

Is there any way to pull out the “class” field from the menus? I’m trying to handle custom columns and layout using classes. Those classes are assigned within the menu.

I keep seeing ‘array’ when I try to insert the class and not the class names.
{{ looper.field({"key":"classes"}) }}

Any suggestions?

[ruenel]

Hey @splaquet,

You can use this:

{{ looper.field({"key":"classes"}) | join(' ') }}

This should return all the menu classes.

Thanks.