How to Add Menus using Toolbar Menu in Drupal 8

With the Toolbar Menu module, you can add as many menus as you need to the toolbar of your Drupal installation. By default, a Drupal 8 installation has 3 menu links in its toolbar. These are:

1. Manage – Administration of the whole Drupal site
2. Shortcuts – Links added by the admin to administrative pages used frequently
3. User Name – Link to the profile page

This module works also with the Admin Toolbar module, which improves the default toolbar providing dropdown menus. In this tutorial, we’re going to cover the usage of the Toolbar Menu module.

What to learn how to change the color of the toolbar depending on which environment you’re on, i.e., dev or test? Then check out Differentiate Websites using Environment Indicator in Drupal 8.

Getting Started

First of all you need to download and install the module:

With Composer:

composer require drupal/toolbar_menu

With Drush:

drush dl toolbar_menu -y

After downloading, go to Extend, look for the module and enable it. The Toolbar Menu module requires the Toolbar and Breakpoint modules. These two modules come with Drupal core and should be enabled by default.

Configuring the Toolbar Menu Module

To configure Toolbar Menu, click Configuration and in the “USER INTERFACE” section click “Toolbar Menu”

Click the “Add toolbar menu element” button, you’ll be prompted to enter a label and select a menu from the dropdown list. For the purpose of this tutorial, I’m going to select the “Footer menu”. Leave the checkbox unchecked, that way, you’ll see the label “Extra” instead of the label “Footer” as a clickable menu in the Toolbar of your Drupal installation and click Save.

The new menu will appear in your Toolbar and if you click on it, it will display its menu links. In this case, there’s only one link pointing to the contact page.

Let’s add another link.

Adding Links to a Menu in the Toolbar

To add a link to the newly added menu in the Toolbar, click Structure, Menus. Locate the dropdown widget on the right of the Footer menu, click the dropdown arrow and select “Add link”.

Click the “Add link” button to enter a title for this menu link, for example “Disclaimer” to create a link to the Disclaimer page of your website. You could even include external links here if that makes sense in your particular case.

This is an autocomplete field, just start typing the name of the node you want to link to, once found select it and click Save.

Check the “Extra” menu link in the Toolbar. It has the new link you just added.

If you click this new link, it will redirect you to the Disclaimer page as expected.

Summary

Toolbar Menu improves the user experience of your Drupal site by allowing site administrators to insert menu links directly in the Drupal default toolbar. With this module you can add all kinds of custom and/or default Drupal menus and grant access to certain user roles to those menus with the help of Drupal’s permission system.