Skip to content

The Basics: The Side Navigation


Introduction to the side navigation

The side navigation is a vertical menu that comes standard with the version 3 and 3.1 templates and is optimal for mobile devices. It is located by clicking the hamburger icon in the top right corner of the site header.

Distinguishing top level and submenu items

Top level items (also known as level 1 items) are visible upon opening the side navigation.

If an item contains submenu items (also known as level 2 items), a dropdown icon will appear.

  • The submenu becomes visible when you click on the top level item.
  • To collapse the submenu, click the top level item again.

If the top level item has no submenu, clicking it will take you directly to another web page or document.

Version 3.1

v3-1 navigation

Editing the side navigation

Step 1:

On the main level of your site, navigate to /_resources/includes, and open v3-navigation.pcf.

v3-navigation.pcf location

Step 2:

To add a new menu item, place your cursor where you would like the new item to appear, then hit Enter/Return. Type a name for the menu item.

step 2 adding a new menu item 

Step 3:

After adding text, use the Insert/Edit Link icon in the WYSIWYG Toolbar to incorporate a link.

link dialog box

Please note: Once a link has been added, the text will format automatically.

Step 4:

Use Enter/Return and Tab to adjust the levels of each item.

navigation step 4

The numbers indicate the level items:

  • 1 = top level item
    • Each top level item needs to have a link.
    • If there are no submenu items listed, link the top level item to a specific web page or document.
    • If the top level item does have submenu item(s), you can add a placeholder "#" in the URL box. This will act as a toggle to open the submenu.
  • 2 = submenu item

Step 5:

Save and publish in order to view changes.

publish button

Adding icons to the side navigation

All navigation menus have an icon automatically added for the home page. The rest of the main menu items are left without icons to allow for customizations. 

Step 1:

To incorporate an icon next to your menu item(s), refer to the Font Awesome cheatsheet to see a listing of all the available icons and their names.


Step 2:

Open the Link Properties Dialog Box and switch the Class dropdown to (custom).

class dropdown

Step 3:

Type the following in the Custom Class textbox, swapping out the brackets and icon name:

  • fal_fa-[icon name]

link dialog box

Step 4:

Click OK. Save and publish to view changes.

Please note: Icons will not appear in the Edit view. 

publish button

Last Updated: 10/19/23