Compatibility:

WebSite X5 Evo and Pro

The role of the navigation menu on a website is crucial: amongst others, it defines the structure of a website, it manages the visitors' navigation on its different pages and it helps index the contents for the search engines. In order for your own website to be successful,  your menu should be logical, simple and efficient.


There are two fundamental steps to create a menu:

  • Go to Step 3 and create your sitemap by adding and renaming all the needed pages and levels adequately (see: How to create the website Map).
  • Use the Menu Object to add a menu on the Template Header, on the Side Bar or directly on one of the pages.


#tip -  The Menu Object takes on the items from the Sitemap. You should therefor give your map an appropriate structure and carefully choose the names for pages and levels. If you modify the Map, the menu will be automatically updated according to the changes you made.


With the Menu Object you can set the graphic settings for:

 

Main Menu

The main menu reports the links to the most important pages of the website, which are in most cases offer pages. Generally speaking, the main menu is placed horizontally in the template Header, or anyway in the top section of the page, which is the first one your visitors see when entering the website. Alternatively, the menu can be vertically placed on a side bar on the left section of the page.


To create a horizontal menu in the Header of your website you should follow these steps:

  • Go to Step 2- Template Settings > Template content > Header.
  • Select the Menu Object from the list of the available Objects and drag it onto the work space: use the anchors to give it the right size and to position it in the correct place.
  • Double-click the Menu Object you added so to open the settings window: you will find all the necessary options in the Main section.
  • Select the level you want to create the menu from: use the button to display the sitemap, select the desired level and confirm your choice. Since you are creating the main menu, you will probably need to select the "Menu" entry.
  • Use the available options to define the menu graphic settings: you can work on the size, the texts and the styles the buttons must take on in their different statuses.


 On the other hand, to create a vertical menu  you should follow these steps:

  • On Step 2- Template Settings > Template Structure choose Header, footer and left side bar. 
  • Go to Step 2- Template Settings > Template Content > Side Bar.
  • Add the Menu Object and follow the above reported steps to set it up. 


#tip - Usability. For a good User Experience, your main menu should be placed on all pages and in the same position: because of this, in our example we have placed it directly in the Template Header or in the Side Bar. Still, you can also decide to put the main menu as content of a page: in this case, you should remember to insert it in all the pages of your website.


Level Menu

Level menus are displayed when a user hovers the mouse on an item in the main menu. A drop-down menu reporting the links to the other pages is usually displayed.


You can follow these steps to set up your level menu:

  • Double-click the Menu Object you added so to access the settings window and open the Level Menu section. 
  • Choose if your level menu items should be displayed on one or more flanked columns. In this second case, remember that a new column is created when: 
    • the number of items reaches or exceeds the value set with the Max Items per Column option;
    • the item list is interrupted by a Separator (which you can add directly in the Sitemap).
  • Use the available options to define the menu graphic settings.


Hamburger Menu

 When the available space in not enough to display all the items, the menu is automatically substituted by the Hamburger Button. This happens even if you are not creating a responsive website.


The Hamburger Button is squared and its height and style can be defined in the Main section of the Menu Object. By clicking on the Hamburger Button the Hamburger Menu is displayed, i.e. a popup menu showing all the first level entries. You can define the graphic settings of the Hamburger Menu using the available options in the Hamburger Menu section of the Menu Object.


You can also choose to always show the Hamburger Button, regardless the available space:

  • Open the Main section of the Menu Object.
  • Activate the Always display the Hamburger Button option.