Open2b version 7.8

Create a menu

You can create as many menus as you like. Menu items can then be easily added, edited, and removed from the back office for each menu.

Before you proceed

Creating a menu, even if it may seem simple, still requires some knowledge of HTML and CSS. You may also need to modify HTML and CSS to correctly display the menu on the store and in the desired style.

Create a new menu

Before you can add a new menu to a template page, you must define it in the editor.json file.

Go to the Website section of the back office.
Go to the Design subsection.
Click Customize next to the template for which you want to name the menu. The Template Editor will open.
Click HTML and CSS.
Click editor.json in the file list on the left. The file source will open in the center of the page.
Inside the "menus" field add the following:
```
  {
      "menu" : "Company",
      "label" : {
          "en" : "About Us",
          "it" : "Chi Siamo"
      }
  }
```
where instead of Company you should provide the name used to reference the menu in template code. The name must start with a capital letter and must not contain spaces (more precisely, it must follow the syntax of a Go identifier).
Click Save to save changes to the file.
Click Exit to leave the Template Editor.

Add a menu to a page

Go to the Website section of the back office.
Go to the Design subsection.
Click Customize next to the template where you want to create the menu. The Template Editor will open.
Click HTML and CSS.
Click the filename where you want to create the menu. The file source will open in the center of the page.
Add the following import instruction at the beginning of the file, as the first line or second line if the first line is an extends instruction:
```
{% import "/imports/menu.html" %}
```
provided that the "/imports/menu.html" import is not already present.
Add a show instruction where you want to display the menu:
```
{% show Menu(menus.Company, "vertical")
```
where instead of Company you should write the name of the menu to display. If the menu should appear horizontally, replace "vertical" with "horizontal".
Click Save to save changes to the file.
Click < at the top left next to HTML and CSS.
Click Menus; the new menu will appear in the left column.