Is there a list of accessible properties in the Menu type field in Design Manager?

Developer Support CMS Development
1

I’m working on a newer and simpler footer menu that our current template makes a mess of. I’d like to know all the properties (Django) I can access so that I can draw the menu cleanly. As of now, I can’t get out of wrapping each link in a <div> - arrrrrrgh! it’s at least working but not optimal.
FWIW - structure I’m going for is:
<nav>
<div>
<h3></h3>

<a></a>…
</div>
(repeat <div>…</div> as necessary for menu sections/columns)

</nav>

2

Hi, @ScottWelch :waving_hand: Thanks for your question! Let’s invite some community members to the conversation. Hey, @ChrisoKlepke @Anton, do you have any tips for @ScottWelch?

Thank yo for taking a look! — Jaycee

3

Hey @ScottWelch,

of course there is a Hubl function for building menus/navigations.

Here’s the doc for creating custom navigations with hubl and the menu function itself.

Basically you’d wrap your menu in a for-loop and use the navigation variables.

What might be quite benefitial are the if-statements and operators and expresions tests.

hope that helps

best,

Anton

4

Thanks for the tips @Anton . The nav module I used as a base was doing a bunch of nested lists which worked for the top nav, but the prior footer was clunky and built by using a separate nav for each column. very un-django if I say so myself. I’ll go check out the article when I have a moment and hopefully mark this as “accepted solution” :grin:

5

You’re welcome!

One thing that I always advise is: Keep it as simple as possible, try to don’t overengineer stuff and think about the person who’s gonna edit/work with this. If you’re the only person who will work with custom coded modules in the portal - awesome. Proceed as you like. :slightly_smiling_face: If a “non-developer” or “non-that-familiar” person should work with it - there’s nothing wrong by using multi modules.

Also here a few other ideas to maybe make your life easier:

  • create your navigation in the global nav editor(settings->Content->navigation), add an empty element or an element without link, write a JavaScript which will look for the empty label and wrap everything between two empty elements in a div and apply a flexbox CSS to it
  • Create a HubDB navigation (quite overengineered but possible)
  • Wrap your headlines in the global nav in html-tags like h3 and style it with CSS (kinda like idea 1)
  • Create a for-loop in a for-loop without the menu node/function. Add a simple text for the labels and a link field to the second-level loop and a simple text for headlines to the first loop. You’ve created your own custom menu module :slightly_smiling_face: The good thing by doing so: you have full control over everything and you can add a lot more custom options like icons or description text for each nav item to it quite easy

best

Anton