Become a HubSpot power user — join us for HubSpot Training Day 2017.

How to set up your site's navigation menus

Last updated: August 28, 2017

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 architectures are 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 COS 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.

HubSpot Help article screenshot

Select Advanced Menus from the left side menu.

HubSpot Help article screenshot

2. Choose a menu

Your default menu contains the pages that will automatically populate the default content of an Advanced Menu Module. As previously mentioned, you can also create new menus to be used for additional, secondary menu options. Since you are creating a primary navigation menu in this example, you will choose the default menu.

HubSpot Help article screenshot

3. Add new pages to the menu

Select Add a page to begin adding to the navigation.

HubSpot Help article screenshot

At this point, you will want to add a Menu Label (this is the text that will show on your navigation menu) and a URL within Linking to page (where you want your visitor to go if they click that text).

HubSpot Help article screenshot

Once you've added the information you need for the link in your menu, you can also click the gear next to the link and decide if you would like to have this link open in a new window.

HubSpot Help article screenshot

When adding a page, you can also click the blue CHOOSE button to select a HubSpot page instead of typing out a link (which is usually reserved for needing to link to an external page or website).

HubSpot Help article screenshot

From here, you can search for a page with the search bar at the top or navigate through and find the page. Once you know the page you'd like to use, click the radio button next to the page and click Choose page.

HubSpot Help article screenshot

4. Add new child page to the menu

To add a new child page to the menu, click on the square icon on the parent page wherein you want this child page to live.

HubSpot Help article screenshot

The hierarchy of pages will control how these menu trees are used in your templates for navigation. Child pages typically appear in a drop-down or fly out submenu, although you can write CSS to style menu's HTML markup to suite your needs.

HubSpot Help article screenshot

5. Save and publish your menu

While you're editing your menu, you can click the Save draft button at any time to save your changes. To finalize the changes you've made and push these changes live to all pages that are using (or will be using) your menu, click Publish changes.

HubSpot Help article screenshot

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 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 > Edit template.

HubSpot Help article screenshot

Click Add row. Drag the module to where you would like your menu. Within that module, click the gear icon then 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 menu options, such as which site map is responsible for the structure 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 site map

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

1. Navigate to Content Settings

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

HubSpot Help article screenshot

Select Site maps from the left side menu.

HubSpot Help article screenshot

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 site map. 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

Was this article helpful?

Previous article:

Measuring Your Performance Project

Next article: