Menu Builder

Menu Builder is a plug-in that will let you create one or more menus (navigations) for your website. You can compose the navigation out of any existing element of the website, such as page, a category, an article, tag, or combination of VTE and xHTML tags resulting in intuitive menu elements like search or tag cloud. Each menu can be attached to a template separately, resulting in different (or modified) menus for different sections of the website, such as web version and mobile version. Also, you can have several menus on the same template (page), with main navigation menu showing top-level navigation and auxiliary navigation showing only current portion of the website.

You need to access to the Plug-ins section. Click on the Plug-ins link which is located in the Main menu at the top of your administration panel.

A list of all plug-ins currently registered to the system is displayed on the right hand side of the screen on Downloaded plug-ins tab.

To install Menu Builder you need to click on the install icon on the right side of the plug-in name.

This will take you to the page with the installation link: Click here to Install the plug-in

After you run the installation, you will be informed that the plug-in was successfully installed.

You may easily go back to the Plug-ins page, by following the link: Click here to go to Plug-in

To uninstall Menu Builder you need to click on the uninstall icon on the right side of the plug-in name

This will take you to the page with the link for uninstall: Click here to Uninstall the plug-in

You will be informed that the plug-in was successfully uninstalled and you may return to the Plug-ins page by clicking the link: Click here to return to Plug-in home page

The path to the Menu Builder plug-in:

Click on the Plug-ins link (which is located in Main menu at the top of your administrator panel).

Choose Menu Builder from the list of all installed plug-ins (on the left side of the screen).

This plug-in can be accessed only by users belonging to groups that are allowed to manage Menu Builder plug-in.

Menus tab that is located on the left hand side of the screen holds +Add new menu link which takes you to new menu creation form and a list of all previously created menus.

If you click on any item listed here, the menu settings will open on the right and you'll be able to see and change its preferences, nodes, title and template or just copy its VTE integration code. You can also edit a menu if you choose edit icon next to its name on the list.

After you have applied changes to a menu click on Save button to apply and keep the changes.

To delete a menu, just click on delete icon next to its title.

Click on +Add new menu link on the Menus tab and use editing area to set-up your new navigation.

First, add its title and choose one of predefined templates for the menu from the drop-down list.

Menus consist of single items - nodes. On each menu you create you can have unlimited number of nodes of the same type or a mixture of categories/subcategories, pages, articles and VTE elements in a chosen order.

After you set-up all nodes and menu preferences don't forget to click on Add button to save this menu.

Click on +Add new node to add new item to the menu you are creating. You can add infinite number of nodes to each menu.

Now double click on the node to add/edit its preferences.

First choose the type - each node can be link, category, VTE, subcategories or all categories.

Link menu item takes a visitor to a link specified in the Href field. It can be internal (page, category, article or a tag that is a part of your Vivvo website) or external (any external link). In case of using an external link just enter the full URL in the Href field, for example http://www.example.com. For internal links you may rely on Search element option - start typing a name of a page/category/article or a tag you want to link to and wait for the matching results to be found then just click on a chosen result and the Href field will be automatically populated.

Click Apply to save changes for the node.

Example menu with links:

Choosing Category as a type offers a list of existing categories and subcategories so you can choose one from the Category drop-down.

After you've chosen a category from the drop-down, Node title and Href fields will be automatically populated with category title and category page URL. You may edit those preferences and add different title/URL.

Mark Include subcategories if you want to show subcategories of this subcategory on the menu as well.

When you are done click Apply to save changes for the node.

Example menu with categories:

Enrich menu by adding Vivvo elements like search box, links to author pages or article tags. These are only predefined elements but you can create your own templates and add, for example, newsletter subscription box or most popular articles to your menu. Just upload your custom templates to VIVVO_TEMPLATE_DIR/box/menu_builder/widgets folder.

For this type of node you just need to enter a title and choose a template from the drop-down menu. When you are done click Apply to save changes for the node.

Example VTE menu:

Use one node to list all categories that exist in Vivvo system - just like default Vivvo menu. You can choose to display only top level categories or include their subcategories as well.

Click Apply to save changes for the node.

Example menu with all categories:

Subcategories menu lists subcategories of an active category and optionally their subcategories. You'll include this navigation in your category template.

Example subcategories menu:

To edit an item just double click on its name and change settings on the right hand side of the screen then click Apply button.

When you double click an item's name you'll be able to delete it - just click on delete icon next to its name.

Drag and drop nodes to change their order on the menu.

Menu Builder generates an integration code for each navigation you create. You may use this code and copy/paste it template file where you want the menu to appear on your website.

Templates are located in {ROOT}/templates/ folder, followed by the currently active theme (default is /xhtml). Commonly used templates for menus are so-called “frame” or main carrier templates holding entire pages in Vivvo site. Three most important are:

• homepage - homepage/default.tpl
• individual article page - article/default.tpl
• category pages - category/default.tpl

• to put menu in all pages, header or footer - box/header.tpl, box/footer.tpl

To get additional help on template files and explanation of template system, you may refer to Template manual.

You can learn how to change template files referring to our User manual::Layout section.