Main navigation usually called only as "nav" or "top nav" is one of the most essential user experience elements.
There are 2 types of menu modules that Hubspot provides.
The first one is called 'Advance Menu' and the second one is 'Simple Menu'. But in this tutorial we will cover only Advanced Menu.
Note: Advanced Menu will always be locked (locked modules are shown in darker background)
The advantage using advance menu is that you will be able to edit the link/menu from content settings and changes can be applied on all pages that specify the module.
Let's start learning how to update an advance menu.
In this article
- How to create an advance menu
- How to edit an advance menu
- How to add the advance menu into a page/template
How to create an advance menu
1. Navigate to Content > Content Settings
2. Click 'Advanced Menus' on the left sidebar.
3. Under the 'Edit a Menu Tree' section, click the button that says "Add another menu"
4. Enter the menu name you want to create, and click "OK".
How to edit an advance menu
1. Navigate to Content > Content Settings
2. Click 'Advanced Menus' on the left sidebar.
3. Under the 'Edit a Menu Tree' section. Click the dropdown option, and choose the menu you are editing.
4. HubSpot will then update the Menu Tree right underneath the dropdown you chose. You can add/edit/remove each menu item.
How to add/change the advance menu into a page/template
1. Open the template in Design Manager
2. Search for a module named 'Advanced Menu', see the screenshot below:
Note that the "Advanced Menu" label is editable. If it's already changed and you want to make sure that you are editing an Advanced Menu, you can check sub-label text; it should always say "Advanced Menu". Here is an example:
3. Click the 'gear' icon and choose 'Edit Options'
4. A popup will appear and what you need to do is to scroll down to the bottom part of the popup.
5. Scroll down to the "Menu" section. And find the menu you want to add in the dropdown.
6. Click "Done"
Note: The way to add a menu and to edit the menu are the same.
