How to set up your site's navigation menus

Last updated: February 2, 2018

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Add-Ons: Website

When you first start building your site pages with HubSpot, there are several important questions that you may ask yourself:

  • What website pages will you include as part of your website?
  • What website pages belong in your primary navigation menu?
  • Will you have multiple navigation menus?
  • How will you order the pages in your navigation?
  • What pages do you think will be most important to your visitors?

These questions will help you begin to plan and to build your site's information architecture (the structural organization of your content). Once you have a good idea about how your site will be organized, you will want to begin building your menus. The advanced menus feature in HubSpot lets you easily map out the entire information architecture and use website pages in the form of a navigation menu. In this section, you will learn to:

Why should you plan the information architecture of your website?

Information architecture is a series of diagrams or maps that organize and prioritize all of the content that you plan to have on your site. They can eliminate a lot of guesswork when you are building out new pages and help your website content keep its core focus. An organized information architecture will also make it easier for visitors to navigate and find content on your website.

When planning your site's information architecture, you want to determine:

  • What are the most important pages that you want your visitors to always be able to access while navigating your site ("top level" pages)?
  • Do these "top level" pages have child pages that you would like to include on the navigation as well?
  • Do these child pages contain another level of pages?
HubSpot Help article screenshot

Once you have an idea of how your site is structured, you can convert that plan into your navigation menus in HubSpot using the advanced menu maps tool. This tool allows you to structure any number of different navigation menus. Site pages (non-landing pages) and thank you pages should always include a primary navigation menu.

HubSpot Help article screenshot

You may want to create a secondary menu that contains more links to less prominent pages on your site.

HubSpot Help article screenshot

How to create primary and secondary navigation menus

Follow the steps below to convert your information architecture into a primary navigation menu.

1. Navigate to Content Settings

In your HubSpot Marketing account, navigate to Content > Content Settings.

On the left-hand side, select MarketingWeb pages. Then click the Advanced Menu tab.

 

2. Choose a menu

Your default menu contains the pages that will automatically populate the default content of an advanced menu module. You can select an existing menu to update, or click + Add menu to create a new menu.

If you'd like to create a new menu from an existing advanced menu, you can select ActionsClone in the upper-right corner.

HubSpot Help article screenshot

3. Add new pages to the menu

Hover your mouse above or below an existing menu, then click the + sign and select a new item to add to the navigation:

  • Add item without link: adds another item to your menu that doesn't link to an existing page. This is often used as a placeholder for child menu items.
  • Add page link: adds a menu item that links to a specific HubSpot page.
  • Add Page link with URL parameters: adds a menu item that links to a specific HubSpot page. With this option, you can type to enter the exact URL of the page you want.
  • Add URL link: adds a menu item that links to a specific URL.
HubSpot Help article screenshot

You can also add a menu item by hovering over the right side of an existing item and clicking Actions > Add item below

HubSpot Help article screenshot

Give your new menu item a name in the Menu item label, and indicate a specific HubSpot page or URL if you want this item to be linked.

If you would like this link open in a new window, hover over the right side of the menu item and click Actions, then click the Open link in new window checkbox.

HubSpot Help article screenshot

4. Add new child page to the menu

To add a new child page to the menu, hover over the right side of the menu item where you want this child item to live. Click ActionsAdd child item below and enter the Menu item label and Select a page for the link. If you need to enter a URL manually, click Actions and select URL Link to change the child menu item type.

For an example of a child page menu, see the 'Company Blogs' menu item appear as the parent along with the children website pages in the dropdown.

 

Child pages typically appear in a dropdown menu or fly out submenu, although you can write CSS to style your menu's HTML markup to suit your needs.

HubSpot Help article screenshot

5. Save and publish your menu

To finalize the changes you've made and push these changes live to all pages that are using this menu, click the orange Publish button in the upper-right corner.

6. Add a menu module to your template

Since you have just edited your default menu, any existing menus modules will now reflect the information architecture that you have created. You can also add a menu to any template via the design manager or the page editor. In this tutorial, you will edit the template through the page editor.

While editing a particular website or landing page, click Settings and select Advanced Settings. Scroll down to the Page Template section and click on the name of the template to edit it.

HubSpot Help article screenshot

Click Add row. Drag the module to where you would like your menu. Within that module, click the gear icon > Swap module. You'll want to find and click on the Menu module, then click Select.

HubSpot Help article screenshot

7. Customize the menu options

To customize your menu options, such as which site map is responsible for the structure of the menu, click the gear icon > Edit options.

To learn more about menu options, check out this article.

HubSpot Help article screenshot

8. Creating a secondary site map and navigation menu

As previously mentioned, you can create multiple site maps for different menus. Within the advanced menus tool, click the Add another menu buttonName your menu, then click Create menu.

HubSpot Help article screenshot

How to set up your sitemap

Follow the steps below to convert your information architecture into a sitemap.

1. Navigate to Content Settings

In your HubSpot Marketing account, navigate to Content > Content Settings.

HubSpot Help article screenshot

Select the Sitemaps tab.

2. Choose your domain

Make sure you first choose the domain for which you would like to edit your sitemap.

HubSpot Help article screenshot

3. Select the pages to include in your sitemap

To begin building your sitemap, check off the boxes next to which pages you want to include in your sitemap. Making sure you include parent and child pages, as from your advanced menu you set up, is key - but you may want to uncheck any landing pages that are live on your domain.

HubSpot Help article screenshot

4. View your sitemap

You can take a look at your sitemap at any time by clicking on the link to View Sitemap for this domain. This will provide you with a direct link to your sitemap, which will be what you need for submitting your sitemap to Google Analytics and similar services.

HubSpot Help article screenshot

5. Save and publish your sitemap

As you make changes to your sitemap, don't forget to click the Save draft button every once in awhile. This will save your changes without pushing the changes live to your sitemap. And, of course, once you're done building your sitemap, click Publish changes.

HubSpot Help article screenshot

Add a placeholder menu item to your navigation

Was this article helpful?

Previous article:

Measuring Your Performance Project

Next article: