How to set up your site's navigation menus

Last Updated: March 05, 2015

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?

At the end of this article, you will see some examples for different types of businesses.

Why should you plan the information architecture of your website?

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.

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

Instructions: 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

From your HubSpot Dashboard, navigate to Content > Content Settings.

Select Advanced Menus in the left-hand side navigation.

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.

3. Add new pages to the menu

Select Add a page to begin adding to the navigation.

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

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.

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).

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.

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.

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.

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.

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 Site or Landing Page, click Actions > Edit template layout.

6. Add a menu module to your template

Click Add row. Drag the module to where you would like your menu.

Click the gear icon > Swap Module.

Choose Advanced Menu, then press Select.

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.

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 button.

Name your menu, then click Create menu.

Instructions: How to set up your sitemap

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

1. Navigate to Content Settings

From your HubSpot Dashboard, navigate to Content > Content Settings.

Select Sitemaps in the left-hand side navigation.

2. Choose your domain

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

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.

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.

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.

Next Article: How to gather your website assets together


Table of Contents

    Get feedback from marketing peers and experts on
    Check out Premier Services