Adding a menu to the live website

Apr 26, 2014 7:26 pm

There are five steps involved in creating a menu and making it visible on your website:

Step 1: Adding a menu group
The first step is adding a menu group to your website. A menu group is a collection of menu items. If your site already has a menu group that you'd like to use, skip to step 2.

  1. Go to the Menus Module in Green. There is a drop-down selector at the top-left of the module where you can see what menu groups already exist on your site.
  2. Click the Add group button to the right of the selector.
  3. A popup will appear asking you to name the new menu group. Name it and click OK. The new menu group will be created.


Step 2: Adding menu items to the group
Now that a menu group has been added, you can add items to it, organize them and link them to content on your website.

  1. The newly-created menu group will have a single item already created called **new**. Rename this to whatever you'd like your first menu item to be called and link it to content on your site.
  2. To add an additional item, click the Add a new Menu Item button and follow the same procedure as above.
  3. Continue until you've created and linked all of the menu items you want in your menu.


See also:

  • Creating multi-level menus
  • Linking to content with the Link Wizard


Step 3: Creating a module layout for the menu group
The next step is creating a module layout. Module layouts determine how website content appears on the live website, and can be added to page layouts. For more information on module and page layouts, see The Layouts Module.

  1. Go to the Layouts Module, Modules tab.
  2. Click the Add a new Module Layout button.
  3. On the next screen, scroll down to the Menus section and select whichever of the three menu types you'd like your menu to be.
  4. Name the new module layout
  5. Make sure that the module group you created in Step 1 is selected from the Menu group or Display menu group drop-down selector.
  6. Set additional configuration settings for the module layout, if necessary.
  7. Click Save at the bottom of the screen.


Step 4: Adding the module layout to a page layout
To make the menu visible on your website, it must be added to a page layout. For more information on page layouts, see The Layouts Module.

  1. Switch to the Pages tab of the Layouts Module.
  2. Click the Edit link next to the page layout you'd like to add the menu to.
  3. Locate where in the layout's HTML you'd like to add the menu. Place the cursor in this location.
  4. Click the second icon in the toolbar just above the HTML: Insert a tag.
  5. From the popup, locate the module layout created in step 4 and click on its name. This will insert it into the page layout.
  6. Click Save at the bottom of the page.

Step 5: Creating styles for the menu
At this point, the menu has been added to the website. In most cases, however, you'll want to add styles to determine how the menu looks. How to do this depends on which type of menu you selected in step 3:

  • Adding styles to a breadcrumb menu
  • Adding styles to a popup menu
  • Adding styles to a single level menu