Custom menu markup for Advanced Menu in Coded Template

Developer Support CMS Development
1

Hello,

I am trying to implement own (very simplified, semantic and minimum wrappers) html markup for menus in HubL. Default markup from menu module has several problems (including absence of nav tag and crazy amount of useless attributes and classes).

Attempt #1: Get menu data from menu module with export_to_template_context

Putting a classic Advanced Menu module and exporting it to template context makes like this:

{% menu "menu_tag" site_map_name="Menu name in settings", overrideable=True, root_type="site_root", flyouts="true", max_levels="2", flow="horizontal", label="Menu name in editor", export_to_template_context=True %}

does make the page being able to choose the menu for the page and givew me some of the information about the menu in widget_data.menu_tag, but I cannot see the menu items themselves. The widget_data.menu_tag object only extracts: site_map_name, root_type, max_levels, parent_widget_container, label, flyouts, export_to_template_context, flow and overrideable.
Q: Is there any data structure there that I am missing? Is there any way to access Advance Menu items from widget_data?

Attempt #2: Use HubL menu function (HubL functions - HubSpot docs)

With this

{% set node = menu(987) %}
{% for child in node.children %}
	{{ child.label }}
{% endfor %}

I am able to generate a fully custom markup, but I need a menu_id parameter as an integer, so I have to set the menu id in the template code so it’s not possible to change that per page. I tried using widget_data.menu_tag.site_map_name as a parameter after using Attempt 1 code, but it’s not integer.

Q: Any idea on how to get integer menu_id from Advanced Menu widget_data?

2

@TomekR an easy way to get IDs of things in HubSpot is to look at the URL when viewing that thing. This works for pages, HubDB tables, forms, ctas, etc.. So I would assume the menu_id is the number string at the end of the URL when viewing the menu in the site settings.

3

Hey @stefen, I am aware of that. However I would like to achieve this without any manual work from page creators - I would like this to be within template code.

I would love to have a template that gets data from menu chosen in Page Editor and generates markup without having to get the id from the url. I wish to use the template for multiple different pages that might have different menus used. This is especially usefull in multilanguage sites.

4

Hey,

I don’t know if this is exactly what you’re looking for, does this help?

If you print menu_id it returns an interger for the selected menu.

Screenshot 2019-08-15 at 18.34.58.jpg
Screenshot 2019-08-15 at 18.34.58.jpg1996×692 84.8 KB

5

OMG! Thank you @Kyle-Higgs - this works perfect. I did not know that there is a Menu data field available in modules. This gives me exactly what I need!

Initially I thought that this is a regular integer field in a custom module, so the Page Editors had to put the id themselves, but this Menu field gives a list of available menus and outputs the integer! Perfect! :slightly_smiling_face: Thank you!

6

You’re welcome!

I literally discovered the menu field about a week ago, I swear it wasn’t there a few months ago.

Glad I could I help anyway.