Working with site navigation in Site Builder

---

Learn how to set up navigation in Site Builder, including header page and footer page navigation options.

---

Which plans include this feature?

Legacy:  Available to existing Site Builder Users only. No further updates are planned.
Current:  No longer available
→ Learn more about our current plans or how to change your plan.

Where can I find this feature using the top menu?

• Manage > Site Builder
  
  

What more do I need to use this feature?

• Admin permissions to manage your account, or restricted permissions to Access Site Builder.
  
  

Which Checkfront version supports this feature - classic items, classic products, or both?

• This feature is available in both our classic version using classic items (Inventory > Items) and our classic version using classic products (Inventory > Products).  → Learn more about products

 

---

Site navigation is how your customers navigate your website and move from one page to another. Organizing your page links in a structured, user-friendly manner makes perfect sense.

As such, Checkfront provides menus at your page's top (the header) and the bottom (the footer). There is also a category filter, which we look at later.  

 

You can manage both the header and footer in your Site Builder web portal by clicking on the Navigation link in the left sidebar. This menu is always visible while working in Site Builder and can be easily accessed.  

 

Let's begin by exploring the associated header and navigation menu.

Clicking on the Navigation link in the left sidebar slides out the navigation edit window.

As highlighted in the image below, you can return to the main menu anytime by clicking on the small arrow icon at the top left corner of the edit window.

 

 

What is the header menu?

The header menu is the set of navigation links at the top of your Site Builder website. Depending on the theme you have activated, this menu may look slightly different, but ultimately it should appear as shown in the following screenshot.

 

 

Looking at the header edit menu, it's easy to see how your options translate into the menu at the top of your Site Builder page.

 

 

 

To edit the header menu, click the blue Edit link, as seen in the image above, to open the edit window. You see a list of any currently active menu options.

This menu, by default, displays some of the pages that come as standard with your theme.  

 

 

Steps to Edit the Header Menu:

1. Select a link type from the dropdown menu.

2. Select a destination from the dropdown menu.

3. Input or change the label in the text field. Please review the details below for step-by-step instructions.  

 

The link type enables you to connect that link to different items or products and features, both inside and outside your Site Builder page. You can access these options via the drop-down menu.  

 

 

There are six link types you can choose from:

 

Page

Page enables you to create a link to another page on your website. You must create the page before updating the menu.

Select the page you want to link to from the dropdown menu highlighted below.  

 

 

You may also choose the text for the navigation button. Short and sweet is always better!  

 

Category

Choosing the category link type lets you create a direct link to a particular category in your inventory. When clicked, the user has a polished page of all the items or products in said category.  

 

 

Select the category from the dropdown Destination menu. The text field contains the category name as configured in your Checkfront account.

If you'd like to change this text for your Site Builder pages, you can do so here.  

 

Item

Like the category link, the item link type enables you to link directly to the booking page for a particular item/product. You can choose the item/product from the drop-down Destination menu.  

 

 

You can update the link text as needed. Otherwise, it's good to go.  

 

URL

The URL link type allows you to create a link to a page that isn't on your Site Builder website.

 

 

In the Destination field, enter the web address (URL) of the site you'd like to link to, then enter a label for the link in the Text field.  

 

Post

Using the blogging feature in Site Builder, you can select the Post link type to link directly to one of your posts.  

 

 

You can select the post from the drop-down Destination menu and change the link label in the Text field if necessary.

If your blog post title is a bit long for this link label, consider condensing it.  

 

Submenu

 

 

The submenu option allows you to create a nested set of links under a single main heading.

In the example below, the main menu link is used as a heading. When clicked, it opens a drop-down menu of actual links. The heading itself does not link to any specific location.  

 

 

Once you enter a label for the main menu item, click the + Add Item to Submenu option.

Here, we've added two Item link types as described above.  

 

 

You can add as many submenu links as you like by clicking + Add Item to Submenu each time. Submenus can consist of multiple link types if you wish!

The finished article looks something like the following:

 

 

---

Once you've been using your menu for a while, you may add some additional links or wish to reorder the links you already have. Site Builder has a built-in feature that allows you to do this.  

 

 

Steps to Reorder the Menu Links:

1. Hover your mouse over a link in your menu editor. The background turns blue, and two horizontal lines appear to the left of the chosen link type.
2. Click and hold your mouse on those horizontal lines and drag the link to a new position in the menu.
3. Release your mouse button to drop the menu item into the selected location.
4. Click the blue Update button to save your progress. The same applies to submenus, and you reordered them similarly.    

 

---

The footer navigation menu is configured just like the header navigation menu, so we won't go into the same detail on setting things up. Scroll back up and read the details there.

The footer is the area at the bottom of your web pages that can contain useful links, social media calls to action, and copyright details.

The idea is the same, though, and you can see in the image below how the links you make translate to the actual footer.  

 

 

The number of columns you can have in your footer is theme-dependent.

In the example we are creating, the footer navigation links are in three columns. We've already looked at how to create menu links and the different types available in Site Builder.

So, let's examine how the footer menu can help users navigate your website, social media, and third-party web pages. We create submenus under the three main headings.

 

 

The structure above has three main columns, each with a heading. These were created by selecting the submenu link type for each one.

We then added three links under each heading using various link types.

When finished, it looks something like the following to your users:

 

---

Depending on your theme, you may see a Category Filter feature in the Navigation section.  

 

 

This enables you to narrow the search on your inventory page by selecting one or more categories to include. Items or products from unselected categories are filtered out of the search results.  

 

 

Steps to Add Additional Categories:

1. Click the Edit link to open the category filter edit window.

2. Click the +Add Item to Category Filter Navigation button. 

3. Select Category from the Link Type drop-down menu.

4. Select the category you wish to add from the Destination drop-down menu.

5. Change the Text label if required.

6. If necessary, hold your mouse on the two horizontal lines to the left of the link type and drag the category into a new position.

7. Click the Update button to save your progress.  

 

Once you configure the category filters, you see them at the top of your Inventory page.  

 

Click on the categories you wish to include in your search. Only the items or products from the selected categories are displayed; everything else is filtered out.