Learn Drupal 8

Written by developers for developers, Drupal allows easy and fast development of every website!

• Last Updated: 03/02/2020
• ( 6 minutes reading )

How to modify Menus in Drupal

Introduction

Based on research, 94% of the respondents claim that easy navigation is one of the most important aspects of a website. We are all aware no one wants to spend ages trying to find what they are looking for and sooner or later end up frustrated. The point we are trying to make is that having a clear menu structure and the ability to navigate between pages quickly and efficiently should be something to pay attention to.

In this tutorial, our main focus will be on the process of modifying the existing menus on your Drupal website.

If you have accessed your website while logged in to your Drupal Admin account, you have probably noticed that pencil icon next to each section. An "Edit menu" option will be displayed on each menu available on the page.

 

Edit Main Navigation menu option frontend

 

The menu shown in the screenshot example above is the so-called "Main Navigation" menu. As the name suggests, this is the primary menu of your website (which could also be displayed on the side depending on the theme you are using). This is the menu that controls the main navigation through your website. There are also secondary menus - an example of that would be the menu positioned in the footer of the page, where the copyright notice is usually placed.

By default, all new items will be assigned to the primary menu. Of course, you can always edit that and place them on whichever menu you wish.

We believe you got the main idea of menus, therefore we can get to the point of this tutorial and guide you on how to edit them.

 

Accessing the Menus page

To begin with, please log in to your Drupal Admin Dashboard and navigate through the Administration toolbar to Manage Structure.

When you access the "Structure" page, please click on the "Menus" link.

 

Accessing the Menus page

 

Once this is done, you will be redirected to the "Menus" page where you will see a list of default and custom menus available on your Drupal website. You will be able to add new menus, edit and add links to existing menus. Please note that the default menus cannot be deleted, you will have an option to remove only custom menus created by you.

 

Menus page overview

 

Let's start off by reviewing the "Main navigation" menu. To do so, please click on the "Edit menu" button next to it.

 

Editing a Menu

When the "Edit menu" button is clicked for the corresponding menu you are aiming to modify, you will be taken to a new page. Under it, you will be able to customize the "Title" which represents the name of the menu as well as the "Administrative summary" which is the menu description and as usual in Drupal, it is optional.

 

Edit menu page overview

 

You will also be able to edit the links added to this menu and add new links (content items) to this menu. You can change the order of the menu links by simply clicking on the corresponding Arrow Cross icon and dragging the menu link to the desired position. Of course, this is in case you have two or more links added to your menu. In our case, it is only one, but this is information worth mentioning. Please note that when performing such changes, you always need to click on the "Save" button to successfully apply them.

Since the interface and information required while editing or adding links is exactly the same we will be giving an example by adding a new link to the menu.

 

Adding Link to a Menu

Once the "Add link" button is clicked, either from the "Edit menu" page or directly by the list of menus ("Menus" page), you will be prompted to the "Add menu link" page.

In here, you will be required to specify the following link details:

  • Menu link title - The text entered here will represent the link name displayed in the menu itself.
  • Link - In here, you will need to enter the URL address of the actual page where visitors will be redirected upon clicking on the link title. It could be an internal Drupal URL, i.e. "/contact", or a full URL address, i.e. "http://hostarmadatutorials.com/contact", as well as an external URL to a third-party website. In case you would like to redirect your visitors to the Front Page of your website, please enter "<front>" in the field.
  • Enabled - This checkbox controls whether the link will be automatically displayed in the menu upon saving it. As you will notice it is checked by default. On some occasions, you might not want to display it immediately. If you uncheck the box, the link will be saved in the menu and ready to be added when the time comes.
  • Description - This is an optional field where you may enter a relevant description that will be displayed whenever a visitor hovers over the link title in the menu.
  • Show as expanded - This checkbox is intended to use if the menu link has children that have to be displayed upon clicking on the menu link.
  • Parent link - This dropdown menu allows you to select where the link will be positioned. Since our link is a parent one we want it to be added directly to the "Main navigation" menu. 
  • Weight -  The value entered in this field determines the position of this link compared to the rest of the links added in the same menu. The lower the value is, the higher the link will be positioned. As we want the "Contact" link to be displayed after "Home" we have given in a higher value. In this particular case - 2.

 

Adding Link to Menu

 

When you are ready with all the required details, please make sure to click on the "Save" button to finalize the creation process.

After the link is successfully saved, you will see it available on the given menu on your website frontend.

 

Link displayed in the Main Navigation menu example

 

Well done! You have now learned how to modify the existing menus of your Drupal website. We hope the matter covered in this guide was useful to you and you have managed to follow our instructions with ease. While we are on the menu topic, we would like to welcome you to check our guide based on How to create a menu and display it on your Drupal website. As usual, if you have any questions, you are more than welcome to address them to our Support Team.

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.