Creating a menu

1. In admin go to Content -> Menus

2. Click the "Create new menu" button

3. Input main information

• Enable menu: This controls whether or not the menu can appear on frontend.
• Menu Title: Name of your menu for admin purposes.
• Identifier: It’s the Unique ID that identifies your menu. This key will be used to reference the menu in theme.
• Menu Main CSS Class: This class will be added to the menu wrapper element.
• Store View: This is helpful when you have multiple store views for example for different languages and you want to create different menus for each.

4. Set up nodes

Nodes are the building blocks of menu. There are many different types of nodes to choose from. To learn about them, check this page.

Ways to add nodes

There are multiple ways of adding nodes to menu.

1. Import from Categories

This feature can help you kick-start a new menu based on categories in your catalog tree. It will add categories from your whole catalog or a selected part. Each category will be a new node in the menu. Subcategories will be properly nested, creating submenus. After the import, you can freely customize the menu by editing auto-added nodes or adding new ones.

Warning! The import will wipe out all your pre-existing nodes in the menu.

2. Use "+" button

This will add a node inside the node you clicked. Nodes inside another node create a submenu.

Adding images

Some of the node types give the option to add an image to the node:

• Category
• Product
• Custom URL

On frontend the uploaded image will appear after the link to the category/product/other URL.

Alternatively, you can create a CMS block with an image, add a node type "CMS Block" to the menu and select the created CMS block.

Changing nodes' position

You can drag a node and drop it to a different position.

Editing a node

To edit a node click the pencil icon. It will display node settings below.

• Enabled: Determines whether or not the node will appear in the menu.
• Node Type: Sets the type of node to one of the types previously described.
• Additional Type Options: Depend on the type selected above.
• Templates: Template selectors are active when there are multiple templates in theme for a specific node type or submenu. By default, there's one template for every node type and submenu so the selectors are disabled.
  • Node template is applied to the node.
  • Submenu template is applied to the child nodes of a node.

5. Click the "Save" button

6. Add the menu to your theme

Learn more here.