CMS Development

thomasl
Contributor

Advanced Menu attribute root_key not working

SOLVE

Hello community,

 

The HubSpot documentation describes the attributes of the module menu. Does anyone know how the "root_key" attribute works?

{% menu "my_menu" site_map_name='global site navigation', overrideable=False, root_key='3925500002', root_type='page_id', flyouts='true', max_levels=5, flow='horizontal' %}

This code snippet renders an empty navigation. I also tried to use the page name instead of the id.

 

Any ideas?
Best regards,

Thomas

0 Upvotes
2 Accepted solutions
Jsum
Solution
Key Advisor

Advanced Menu attribute root_key not working

SOLVE

@thomasl,

 

Something you said has me puzzled. You said that when someone deletes a page it will still show in the menu if you use the method in the link you posted...

 

I am pretty sure this is your issue. It has been a long time since I have create anything more than simple navigation from the advanced menu module, but from what I remember you still have to add all of your pages to the menu, and remove them if they are deleted regardless of which settings you are using. If you delete a page in an advanced menu the link remains but it will go to a 404.

 

I think the reason that your menus aren't showing is because you haven't added the links to your menu? 

 

There is no core organization or relationship to pages in Hubspot. You can fake a relationship using directories in the url, and you can create child/parent relationships in the advanced menu settings, but these are superficial. If you don't add the page links to the menu manually the advanced menu module would have no clue about the relationship of pages so 'dynamic by page' wouldn't do anything. You have to provide the relationship in the advanced menu settings by building out your menu. 

 

Is that the problem? Did you actually build out your menu in the advanced menu settings? if so then what you are attempting should work. 

 

As for the mega menu, I have found this to be an issue myself. the two easiest methods are:

 

1.  Use raw code in a custom HubL template. this is hard to edit, it still has to be updated, etc, but it allows for the most control.

2. Use a series of advanced menus in custom html inside a custom HubL template. This is the same as 1 only easier to update because of the advanced menu modules. What you are trying falls under this I think.

 

possible 3. If you are any good with javascript you could build out the whole menu into one large menu, structure it by targeting the nesting ul's and li's using css. and Inject non menu content into it using javscript. I haven't done this but it is pretty simple javascript so I am 100% sure it would work.

View solution in original post

thomasl
Solution
Contributor

Advanced Menu attribute root_key not working

SOLVE

Hello again,

 

the navigation is only rendered if the attribute 'root_key' is set to a page which is a child of the current page in the menu. If you set the attribute to a parent page, the rendered navigation is empty.

 

Best,

Thomas

View solution in original post

0 Upvotes
6 Replies 6
roisinkirby
HubSpot Product Team
HubSpot Product Team

Advanced Menu attribute root_key not working

SOLVE

Hey @thomasl is it possible to share a live/preview link to the page you are working on?

 

@TRooInbound@Jsum@Ty@ndwilliams3@dessery are some resdient experts who might be able to offer some setup advice. 

 

What I can tell you is that root_key is a HubL string that is to find the menu root. When root_type is set to page_id or page_name, this param should be the page ID or the label of the page, respectively. Find out more here.

0 Upvotes
Jsum
Key Advisor

Advanced Menu attribute root_key not working

SOLVE

@thomasl@roisinkirby,

 

I could be wrong here but I believe that this attribute is used to contain the id of the page when the menu is set to "dynamic by page", or "root_type='page_name or page_id'". This would be dynamic by section based on the root of the section of pages the menu is at. 

 

Also I think that this is a dynamic attribute that is automatically set based on the root page of the section of pages the menu is sitting in for the user, so you shouldn't need to manually set it. If your viewing your menu in page section X page and you set the root_key to Page section Y then it won't show any menus because your not on page section Y page, your on a page section X page. 

 

A couple of experiments you could try:

1. Go to a page with the menu, check the developer info, find the menu Json, and check for the root_key attribute and it's value. Do this on a few pages with the menu to find a pattern.

 

2. Create you advanced menu module in a template builder template (drag and drop). set all of your settings in the module. Copy the page to code, find the menu module you set up in the code, copy it and use that since it's already set up how you want.

 

It would also probably help if you could tell us what you are trying to do.

0 Upvotes
thomasl
Solution
Contributor

Advanced Menu attribute root_key not working

SOLVE

Hello again,

 

the navigation is only rendered if the attribute 'root_key' is set to a page which is a child of the current page in the menu. If you set the attribute to a parent page, the rendered navigation is empty.

 

Best,

Thomas

0 Upvotes
thomasl
Contributor

Advanced Menu attribute root_key not working

SOLVE

@roisinkirby ... that is the same link I already posted in the initial post, right? Thank you for linking the experts in your post. 🙂

 

Thank you, @Jsum!

I checked the developer info and the root_key is set correctly, but no navigation would be rendered.

 

What I am trying to do:

For our website we are planning to build a mega menu like this. 

______________________________________________________

| Item 1    |  Item 2    | Item 3    | Item 4    |     Item 5     |             |

|=========^==============================|

| Logo / image                                                                                 |

| Sub navigation title                Sub navigation title                 |

Lorem ipsum dolor sit amet, consetetur            Lorem ipsum dolor sit amet, consetetur             |

| sadipscing elitr, sed diam nonumy eirm.           sadipscing elitr, sed diam nonumy eirm.             |

| Sub menu item 1                     Sub menu item 1                      |

| Sub menu item 2                     Sub menu item 2                      |

| Sub menu item 3                     Sub menu item 3                      |

| Sub menu item 4                                                                          |

|_____________________________________________________|

 

To not create thousands of menus in the backend, I thought I could change the root_key manually for every time I call the menu module in the HUBL code. So I can reference all Sub navigations with the same menu with different starting points.

 

 

Any other ideas how I can implement this kind of mega menu?

I think the solution descripbed in the HubSpot blog (http://designers.hubspot.com/blog/how-to-implement-a-hubspot-cos-mega-menu) does not fit my needs. When someone deletes a page, it will still appears in the navigation.

 

Best
Thomas

Jsum
Solution
Key Advisor

Advanced Menu attribute root_key not working

SOLVE

@thomasl,

 

Something you said has me puzzled. You said that when someone deletes a page it will still show in the menu if you use the method in the link you posted...

 

I am pretty sure this is your issue. It has been a long time since I have create anything more than simple navigation from the advanced menu module, but from what I remember you still have to add all of your pages to the menu, and remove them if they are deleted regardless of which settings you are using. If you delete a page in an advanced menu the link remains but it will go to a 404.

 

I think the reason that your menus aren't showing is because you haven't added the links to your menu? 

 

There is no core organization or relationship to pages in Hubspot. You can fake a relationship using directories in the url, and you can create child/parent relationships in the advanced menu settings, but these are superficial. If you don't add the page links to the menu manually the advanced menu module would have no clue about the relationship of pages so 'dynamic by page' wouldn't do anything. You have to provide the relationship in the advanced menu settings by building out your menu. 

 

Is that the problem? Did you actually build out your menu in the advanced menu settings? if so then what you are attempting should work. 

 

As for the mega menu, I have found this to be an issue myself. the two easiest methods are:

 

1.  Use raw code in a custom HubL template. this is hard to edit, it still has to be updated, etc, but it allows for the most control.

2. Use a series of advanced menus in custom html inside a custom HubL template. This is the same as 1 only easier to update because of the advanced menu modules. What you are trying falls under this I think.

 

possible 3. If you are any good with javascript you could build out the whole menu into one large menu, structure it by targeting the nesting ul's and li's using css. and Inject non menu content into it using javscript. I haven't done this but it is pretty simple javascript so I am 100% sure it would work.

thomasl
Contributor

Advanced Menu attribute root_key not working

SOLVE

Thank you for the possible solutions, @Jsum.

 

I think the third solution would fit best to my needs. Maybe I will combine this with a HubDB to manage the description texts.

 

One more thing ... I unpublished a site which was defined in the navigation. After unpublishing, the item was deleted from navigation in the frontend and the user won't run into a 404 error page – great feature. HubSpot added this function before ... one year I think.

Best,

Thomas

0 Upvotes