Printing child links using the menu function

[Amit_95]

I have a menu in the HubSpot backend configured like this:

I'm trying to use the menu function to print out the markup of the above menu.

At the moment, I have:

{% set menu = menu(module.menu) %}
{% for item in menu.children %}
  <li class="{{ item.label|lower|replace(' ', '-') }}">
    <a href="{{ item.url }}">{{ item.label }}</a>
  </li>
{% endfor %}

But the above only prints the markup for top level links, not the child links underneath them. So it prints the following markup:

<li class="get-connected">
  <a href="#">Get connected</a>
</li>

<li class="register">
  <a href="#">Register</a>
</li>

<li class="tracks">
  <a href="#">Tracks</a>
</li>

How can I get it so that it prints the child markup too? So, what I am looking for is this (example):

<li class="get-connected">
  <a href="#">Get connected</a>
  <ul>
    <li>FF Studio</li>
    <li>FF Blog</li>
  </ul>
</li>

[Anton]

Hi @Amit_95, 

you don't need a for loop to display the menu if you're using this hubl code.

Simply paste it in your module/template and leave the id blank. When building a page you can select the desired menu. HubSpot will automaticly translate the hubl into the right menu structure. 

Tipp: The ID is a bit hidden but can be found after selecting the menu once and previewing the page. When you inspect the sourcecode of the page/menu you should see this line(s):

 The "data-menu-id" is your menu ID. So after you found it you can go back to your module/template and paste it in. By doing this you won't need to select the menu everytime you're building a page.

best, 

Anton

[Amit_95]

Hi @Anton,

The reason I'm running the for loop is so that I can have control over the menu's markup (don't want those spans).

The docs for the menu function I'm using is here. However, in the docs, it doens't say how I can print child items?

[Anton]

If you want to get rid of the spans, simply add "no_wrapper=True" to your menu hubl code.

It should look like this:

{% menu "my_menu" id=456, flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu', no_wrapper=True %}

Best,
Anton

[Amit_95]

Hi @Anton 

It's not just the span I want to remove, it's the unncessary classes and data attributes that come alongside this appoach too. Whilst your approach does the job, I'm looking to be in complete control of the markup that is generated within my list items.

Are you suggesting there is no way for me achieve this with the partial approach HubSpot have defined here?

[Anton]

Hi @Amit_95, 

if you want to work with this code it's fine. I've modified you the code:

{% set default_node = menu("default") %}

<ul>
  {% for child in default_node.children %}
{% if child.level == 1 %}
  <li><a href="{{ child.url }}">{{ child.label }}</a></li>
{% else %}
  <li>
    <ul>
    <li><a href="{{ child.url }}">{{ child.label }}</a></li>
  </ul>
  </li>
{% endif %}
{% endfor %}
</ul>

But if you want to completly modify it and have complete control over your menu try this:

Write your own menu Module

It's easier than it sounds.

Here's my code:

{# Config #}
{% for item in module.single_nav_entry %}{% set href = item.menu_url.url.href %}
{% if item.menu_url.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
{% endfor %}

{# Code #}
<ul>
  {% for item in single_nav_entry %}
  {% if item.child %}
  <li>
    <ul>
    <li class="{{item.custom_class}}"><a href="{{ href }}"{% if item.menu_url.open_in_new_tab %}target="_blank"{% endif %}{% if item.menu_url.no_follow %}rel="nofollow"{% endif %}>{{ item.menu_name }}</a></li>
    </ul>
  </li>
  {% else %}
  <li class="{{item.custom_class}}"><a href="{{ href }}"{% if item.menu_url.open_in_new_tab %}target="_blank"{% endif %}{% if item.menu_url.no_follow %}rel="nofollow"{% endif %}>{{ item.menu_name }}</a></li>
  {% endif %}
  {% endfor %}
</ul>

and here some screens of the module functions/widgets:

module widgetsgroup settings

If you want to use it as a global element don't forget to select "global module" when creating the module. If you want to use the module in a global group you don't need to do this. 

best,

Anton