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 the top of your page (the header) and the bottom (the footer). There is also a category filter which we look at later.  

 

Both the header and footer can be managed 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.

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

 

 

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 like this...  

 

 

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. This slides out the edit window even further. 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 drop-down menu.

2. Select a destination from the drop-down menu.

3. Input or change the label in the text field. Please take a look below for detailed instructions on these steps.  

 

The link type enables you to connect that link to different items or products and features, both inside and outside your Site Builder page. The options are accessed via a 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. The page must have already been created before updating the menu.

Select the page you want to link to from the drop-down 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 on, the user has a polished page of all the items or products in said category.  

 

 

Select the category from the drop-down 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 or product. That item or product is chosen from the drop-down Destination menu.  

 

 

Update the link text as needed. Otherwise, it's good to go.  

 

URL

If you'd like to create a link to a page that isn't on your Site Builder website, then you can do so with the URL link type.

 

 

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

 

Post

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

 

 

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 little long for this link label, you may want to condense it.  

 

Submenu

 

The submenu option enables you to create a nested set of links under one main heading.

In the example below, the main menu link is used as a heading, which, when clicked on, opens up a drop-down menu of actual links that can be clicked on. The heading itself does not link anywhere specific.  

 

 

Once you've entered a label for the main menu item, click + Add Item to Submenu.

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

 

 

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

The finished article looks something like this...  

 

     

---

Once you've been using your menu for a while, you may decide to 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. Notice that 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, and the menu is now reordered.

4. Click the blue Update button to save your progress. The same applies to submenus, and they can be reordered in the same way.    

 

---

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. Simply 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, there are three columns for the footer navigation links. We've already looked at how to create menu links and the different types available in Site Builder.

So, let's look at how the footer menu can navigate your website, social media, and third-party web pages. We do this by creating submenus under the three main headings.  

 

 

Looking at the structure above, we have three main columns, each with its 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 this to your users...

  

---

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

 

 

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

 

 

Steps to Add Additional Categories:

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

2. Click + Add Item to Category Filter Navigation .

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 required, 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 Update to save your progress.  

 

Once you've configured 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 categories selected are displayed. Everything else is filtered out.