Get Free Audit

How to Create Menu in Magento 2 – Step by Step Instruction

Mar 21, 2019

15898 Ivan Orlovsky

How to Create Menu in Magento 2 – Step by Step Instruction

In an online store, the menu is one of the core navigation elements, therefore its creation should be approached with a great deal of care and consideration. In this article, I will go over the best ways to create a menu in Magento 2, as well as how to edit and add new categories to it.

Table of contents:

How to create a menu via an additional block
How to create a menu via a CMS block
How to edit menu in Magento 2
How to add categories to the menu

How to create a menu via an additional block in Magento 2

The first method requires minimal knowledge of working with remote access.
In your theme, override default.xml
YourTheme / Magento_Theme / layaut /default.xml. Now you need to create in YourTheme / Magento_Theme / Magento_Theme / templates your Your_name.phtml (I named mine test) file, where you specify your link.

Example:


Then you should create a Block and connect our file; this is how looks.


pic 1

How to create a menu via an additional block

In order to unify its style with the rest, add a level0 class to align it in one line and a level-top link class to change the link color.

How to create a menu via an additional block

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

How to create a menu via a CMS block in Magento 2

The second method requires more knowledge, because you will need to work with the admin panel of the site.

First, you need to override YourTheme /Magento_Theme /laoyaut /default.xml. 


NB! It is better to disable the standard editor in the beginning so that it would be easier to work with HTML.

stores configuration

Create our CMS block in our admin panel,

blocks identifier

where you can specify your HTML structure

specify your HTML structure


Magento Audit

Magento Audit

Take your online store to the next level with BelVG Magento Audit

Visit the page

You get the following result.

test link

On the screenshot, you can see that our menu was derived from the CMS block and the link we earlier added.

There can also occur a situation when you suddenly need a link banner. You will need to:

1) create a CMS block as we did earlier;
2) create an selectable HTML structure;
a) create a banner block structure. The banner usually consists of a text and a picture


Load the picture pressing the Insert Image button.

insert image

Now we insert our new CMS block in the menu. First, select the place where we want to insert it. Create a block that hides our banner and serves as a wrapper for it


and press Insert Widget button that you can see at the screenshot above.

Widget Type – choose a type from the list that we want to display in the widget and select our block.

widget type

Block – click on the Select block button and in the list there will be the name of all available CMS blocks, select the one you created (in our case, we called it Banner).

banner

Press the Insert widget button

insert image

This is what you should get as a result:

cms block

Now, all we have to do is to specify the styles for our structure (to learn more about the creation of a theme in Magento 2, explore our two-part manual Magento 2: How To Create a Theme (Pt.1) and (Pt.2). Go to the file for the styles in our theme. Below are the styles from my example.


You will get the following result

cms homepage content

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

How to edit menu in Magento 2

We looked at two ways to create a menu; they can as well be applied to edit menu. For editing, the second one is more convenient, because it enables the developer with more flexibility; you can set any structure using HTML, you do not need to enter and edit the site files.

How to add categories to the menu in Magento 2

Log in to the admin panel and navigate Catalog->Categories.

catalog categories

Press the Add Subcategory button to create another subcategory in Default Category.

add subcategory

Specify the name of a new category in the Category Name field.

Category Name field

Make sure that Include in Menu is enabled. As a result, the following category will appear in the menu.

belvg test

subcategories

Subcategories for Magento 2

Take your online store to the next level with BelVG module

Download here

Summary

These were the most functional methods of creating a menu in Magento 2 as well as step-by-step instruction on how to work with them. If you have a question or a comment, feel free to leave it down below.

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

2 Comments

  1. Hi Jim
    Did you disable the standard editor in the beginning so that it would be easier to work with HTML?

  2. This does not work in 2.2.6, the editor adds around the items, every time I remove them they come right back

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *