Using a HubL variable in an Advanced Menu

[spalumbo]

I have setup a code file that has some global url variables and common macros that we would like to use across our site.

On the template I would like to use this file, I have included it in the template HEAD

{% import "custom/page/web_page_basic/environment.html" as env %}

There is a global component used on this template that contains an Advanced Menu. I’d like one of the Advance Menu items to navigate using a variable:

Variable used in Advanced Menu
However when the page is rendered, the variable is treated as a literal and is not resolved.

<a href="https://{{env.app_url}}/sign-in">Sign In</a>

Any help on this would be appreciated.

[Ty]

Hi Spalumbo,

We were attempting to do this aswell on HubSpot Academy, after a few variations and trial and error, we found it was better for us to do this via a global module. What we ended up doing was creating the standard advanced menu wireframe (you can get the code from here). Then you can go to Content > Content Settings > Global Content > Add New Global Module and paste your wireframe.

We were using this to deal with localization URLs and languages, what we would do is set our ‘root-domain’ for the language as a variable. For example:

{% set root_domain = 'http://www.hubspot.com' %}

And then in our navigation’s wireframe, we inputted it as you would with a normal HubL.

<li><a href="{{ root_domain }}/link1">Link 1</a></li>
<li><a href="{{ root_domain }}/link2">Link 2</a></li>
<li><a href="{{ root_domain }}/link3">Link 3</a></li>

Perhaps this could help you solve your issue as well!

-- Ty

[spalumbo]

Hi Ty,

Just to clarify your instructions, are you suggesting I take the rendered raw HTML from an advanced menu, and paste it into a “Custom HTML” Global Module and then update the markup manually to sprinkle in HubL?

[Ty]

Hi Spalumbo,

Yep! That’s exactly what I was saying. When a HubL variable prints itself, it’s usually a good indication that your variable is not being parsed by HubL, and the advanced menu is reading it as plain text, rather than a function. As long as you keep the class and id names the same, the menu should stay responsive to your HubSpot boiler plate’s CSS, but since it’s now in a module, HubL will be able to read/replace your vairables!

-- Ty

[spalumbo]

Hi Ty,

I really appreciate your help on this. However, I don’t think this is a sustanable solution for the following reasons:

1. Doing this would put my new components at risk for the future if hubspot ever decides to change those classes/ids.
2. I lose the gui for making updates, which makes the component easier to break when non-technical people are making updates.
3. I need HubL tag interpolation on many more global components (such as CTA, etc…). As a result, I would be forking many of the ready built hubspot modules just to use HubL.

Perhaps I can make a feature request to enable HubL variables in hubspot modules?

[Ty]

Hey Spalumbo,

I consulted a couple colleagues to just triple check whether this would be possible or not and I was told it is not currently a feature. My advice would be to submit it as a feature request or an idea, but as of right now, the best way to use HubL within your menu is to build it out in raw html, and if you use a custom module, you can still keep the drag and drop functionality.

If you do end up submitting an idea, I would link back to this post so it can help our devs get background knowledge on the current situation.

Thanks for reaching out!

-- Ty

[ndwilliams3]

There is a way to do what you want to do, well sort of!

If you use HUBL to create a menu in a HTML module (Not a HUBL module)

{% menu "my_menu2" site_map_name='My Menu', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}

Then define your variables in the head section under Edit > Edit Head and not in a template module.

{% set my_menu_link_1 = "www.google.com" %}

I say “sort of” as it doesn’t work using the import function.

The menu links will include the variable (www.google.com) and not the token {{ my_menu_link_1 }}

[ndwilliams3]

I tested this again and it does work in the template if you define the variables in a separate module before the HUBL menu code. You may play around with macros and imports to see if you can get it to work.

[spalumbo]

ndwilliams3’s solution comes the closest to what I was asking for so I’m going to mark it as accepted.
I’m also going to follow Ty’s suggestion and submit an idea to support using variables in hubspot provided global modules.

Thanks everyone!

[Dov80]

{% menu "my_menu", id="456", site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}

^^This is a copy of what I am using in my html document. The menu name is ‘Default’^^

Hi,

I see that you have used the HubL menu module. I would like to reference a menu I created on the Hubspot content page, do you have any suggestions about doing so. From what I have seen the site_map_name attribute should be the way to go but I seem to be doing something wrong.