1. Tutorials
  2. Structure
  3. Menus

Menus

There are a few menu options available in WebPublish 3.0: The main menu navigation, known as the Default Menu, three configurable Footer menus.

Default Menu

When a site is first created, the Default Menu will automatically be used for the main site navigation. It allows you to add a menu structure with as many sub-levels as required in your site. To edit the links on your default menu, you can either follow the Basic Menu Updates tutorials on this page, or you can update menu links for specific pages following the Content / Editing tutorials.

Mega Menu

The default menu styling for WebPublish 3.0 is a drop-down menu. For small sites that have shallow navigation, this design works well. However, for large sites with more complex navigation, a mega menu may be a better alternative. 

A mega menu is an expandable menu that displays many link options within each top-level menu item. In our mega menu design, these options are displayed in up to four columns, displaying children up to the third level. 

Mega menus allow users to visually compare their choices for where to go on your site and understand the relationship between the pages on your site (Neilson Norman Group, https://www.nngroup.com/articles/mega-menus-work-well/). For help enabling and maintaining a mega menu, follow the Mega Menu Updates tutorials on this page. 

Navigating at the 4+ level with the mega menu

WebPublish 3.0's mega menu allows you to add menu links up to a depth of 3 on the main navigation, where the 1st level is a link at the top-level menu navigation. To help address cases where a site may require deeper navigation, we've introduced a sub-menu feature for the 4+ level. When a visitor navigates to a page at the 3rd level that contains children, a flyout menu will appear at the left side of the screen. Expanding this menu allows the visitor to navigate through the deeper levels of their site. Their location relative to the main nav will be reflected in both the breadcrumbs and by visual indicators in the mega menu. 

Footer, Footer Menu 2, and Footer Menu 3

The Footer, Footer Menu 2 and Footer Menu 3 menus are available for you to configure customized lists of links to include in the footer of your site. To add and remove links to the individual menus, follow the step-by-step instructions in the Basic Menu Updates tutorials on this page. You can also update the headers that appear at the top of each of these lists.

Basic menu updates

The following tutorials are applicable for any menu type and provide step-by-step instructions on basic updates.

  1. Navigate to Structure > Menus
  2. Click "Edit Menu" for the applicable menu (such as "Main navigation")
  3. Click "Add link"
  4. Add a title to the Menu link title field - this is the text that will appear on your navigation
  5. For the Link field, start typing the name of the page that you'd like to link to - a list of pages matching your search criteria will appear. Click the page title to add. For menu items with child pages, enter <nolink> to display link text only.
  6. Ensure that the Enabled field is checked - this will ensure that the menu link appears in the menu structure
  7. Optional: you can add a Description for the link - this will add a tool tip that will appear to users when they hover
  8. Use the Parent link drop-down to select where in the menu structure the link should appear
  9. Click "Save"

  1. Navigate to Structure > Menus
  2. Click "Edit Menu" for the applicable menu
  3. Locate the menu link that you'd like to modify and click "Edit"
  4. Modify the link as necessary
  5. Click "Save"

  1. Navigate to Structure > Menus
  2. Click "Edit Menu" for the applicable menu
  3. Click the crosshairs next to the menu link that you'd like to move
  4. Drag-and-drop the menu link to move it to where you'd like it to appear in the menu structure
  5. Click "Save"

Tip: If you have difficulty using the crosshairs, try another browser (anecdotally, it is reported that Chrome works best for this). Also, you may have to wait several seconds for the drag action to appear to be active. After you drag, hold your mouse click (do not let it go and drop the item) until you see the menu item move.

  1. Navigate to Structure > Menus
  2. Click "Edit Menu" for the applicable menu
  3. Locate the menu link that you'd like to disable and click Edit
  4. Uncheck the Enabled field. By disabling the link, the menu link will still exist, keeping the page's breadcrumbs the same; however, the link will no longer appear in the menu structure
  5. Click "Save"

Note: Adding a page to the menu when you first create it and then disabling it serves multiple purposes - the system will auto-generate a nested link path and add a corresponding breadcrumb. Disabled links also still display an active state on the main navigation tab that the page lives under, which further helps to orient users to their place on the website.

  1. Navigate to Structure > Menus
  2. Click "Edit Menu" for the applicable menu
  3. Locate the menu link that you'd like to delete
  4. Click the drop-down arrow next to the Edit button in the Operations column and click "Delete"
  5. You will be prompted to confirm this action. If you are sure, click "Delete"
  6. The menu link will be removed from the menu

Note: If a deleted menu link had child page menu items, they will still exist in the menu one level up from where they were before. It is often simpler to  manage/move these links before removing the parent menu item
 

  1. Navigate to Structure > Block Layout
  2. Locate the footer menu region that you'd like to update (Note: Footer Menu 1 is the right-most column, Footer Menu 2 is the centre column and Footer Menu 3 is the left-most column)
  3. Each region contains a menu block (see the Category column) - locate the block and click "Configure"
  4. Update the Title field according to what you would like to be displayed in the footer. You can optionally turn off the title by un-checking Display title
  5. Click "Save block." The title will be updated in the footer

Mega menu updates

To enable the Mega Menu for your site, you'll need the site administrator role: 

  1. Navigate to Structure > Block Layout
  2. Scroll to the Navigation region
  3. By default, the "Main navigation" block will be enabled. Click the drop-down for this block and select "Disable" (Note: we recommend disabling the block rather than deleting it, in order to make it easier for you to revert if you ever decide you no longer wish to use the Mega Menu)
  4. The Main menu Megamenu block will appear in the Navigation region as disabled. In order to turn it on for our site, we need to enable it. If you scroll over the block it, you'll see that you can select "Enable". Click this option. 

The Mega Menu has now been turned on for the site. Unlike the default menu navigation, links in the Mega Menu are not added automatically when a page is added to the site. This means links need to be added manually. Use the instructions in the "Manage menu links" drop-down in this section.

To add a link to the Mega Menu, you have to add it through Structure > Menus. Configuring the Menu Settings on the individual page will not add the link to the mega menu. 

  1. Navigate to Structure > Menus
  2. For the Main menu Megamenu, click "Edit menu"
  3. Click "Add link"
  4. Add the text you'd like to appear in the "Menu link title" field
  5. Use the Link field to search for the page you'd like to to add, by name. Alternatively, you can add the Node ID for the page. 
  6. Leave the link enabled
  7. Use the Parent link drop-down to select where in the menu navigation you'd like the link to appear
  8. Use the weight field to control where within the parent the link will sit, relative to other links. Alternatively, you can rearrange your menu links after you've saved the link. 

To rearrange menu items, drag the crosshairs next to the link to move it. 

To update a link, click "Edit" and make the desired modifications, then click "Save". 

To delete a link, click the drop-down arrow in the Operations column and click "Delete". You will be asked to confirm that you wish to delete the link. If you're sure, click Delete. Otherwise, click Cancel. 

Note: you must have the site administrator role to complete this step.

By default, links in the mega menu will stack to fill four columns under a given 1st level menu item. You can alternatively use either the first or fourth column in the menu to display an image. In this case, menu items will stack to fill the remaining three columns. To add an image to your mega menu: 

  1. Navigate to Content. At the top of the Content menu select "Simple mega menu list"
  2. Click "Add Simple mega menu"
  3. Choose where you'd like the image to appear. To add the image to the first column, select "Image on Left". To add the image to the fourth column, select "Image on Right"
  4. Fill in the fields: 
    1. Add a name to the "Name" field; this will make it easier to locate later when we add it to the menu
    2. Upload the image you'd like to appear in the Menu Image field
    3. Add the URL you'd like the image to link to
    4. Optionally, add a caption to the Caption field
  5. Save the page. Ensure "Publishing status" is enabled
  6. Navigate to Structure > Menus > Main menu Megamenu
  7. Locate the 1st level menu item where you'd like the image to appear and click Edit
  8. In the Simple Mega Menu field at the bottom of the page, search for the simple mega menu image you just created. You can search based on name. 
  9. Once it appears in the drop-down, click it to add it to the field. Click Save. 

Now, when you view that top-level menu item, you'll see the image appear according to the placement you specified. 

Impact of 2020-12-09 release on menu behaviour

Previous click behaviour

  • menu item with no child pages > one click reveals the page
  • menu item with child pages > one click reveals submenu, two clicks reveals the page
  • forces the creation of page content for the parent menu item

New click behaviour

Any action on the site now requires only one click:

  • for menu items with no child pages > one click reveals the page
  • for menu items with child pages > one click opens a submenu; next click closes the submenu

What this means

  • any item in the menu that has an arrow/toggle indicating a submenu/child page(s) no longer links to a page

What you need to do

  1. Go to Structure > Menus > and under Main navigation, select Edit.
    In the menu structure, click to Edit each parent link (save time by opening each in a new window), and edit the link item by replacing the Link field content with <nolink> 
     
  2. Create an additional link in your menu and link it to that same page that was previously acting as a parent page. You might use a word like "Overview of..." in the menu text to indicate introductory content, or use entirely different menu text than before.

    – or –

    Where the content of that page was not of great value (often these only contain links to the pages below), keep the parent menu item but archive (unpublish) or delete the page.