| Drupal

How to Use the Menu Item Extras Module for Drupal 8

Mega menus are not a design trend anymore, but an essential part of most of the websites related to news or eCommerce.

The Menu Item Extras module for Drupal 8 improves the default menu system in Drupal, by allowing the site builder to add fields to the menu items. That way, it is possible to create a mega menu with a couple of simple steps.

Follow along to learn how to use this module. Let’s start!

Step #1: Install the Required Modules

In addition to the Menu Item Extras module, you will need to install Viewfield. Viewfield provides a field that holds a reference to a View and renders it whenever the entity containing the field is displayed.

  • Open the terminal application of your PC.
  • Type:
    • composer require drupal/viewfield
    • composer require drupal/menu_item_extras

200414 menu item extras 001200414 menu item extras 001

Enable both modules after downloading.

  • Click Extend.
  • Check both modules.
  • Click Install.

200414 menu item extras 003


Step #2: Create a Taxonomy System

Perhaps the word “system” is not very appropriate since we will only create one vocabulary with ten associated terms. However, this example will explain the basics, so you can work with more complicated taxonomy systems in the future.

  • Click Structure > Taxonomy > Add vocabulary.
  • Enter the name “Topics” and click Save.
  • Click Add term and add all terms detailed below one by one.
    • Topics
      • D8
      • Symfony
      • WP
      • Magento
      • CSS
      • HTML
      • JS
      • PHP
      • Python
      • DevOps

200414 menu item extras 004


Step #3: Create the Content Types

For the purpose of this tutorial, we are going to use 2 content types with the following fields:

  • Services
    • Service Image / Image / Allowed number of values: 1
    • Intro text / Text (formatted) / Allowed number of values: 1
    • Description / Default field

200414 menu item extras 005

  • Blog
    • Category / Taxonomy term / Allowed number of values: unlimited
    • Description / Default field

200414 menu item extras 006

 

Make sure you select the Reference type (Topics) when creating the Taxonomy field.

200414 menu item extras 007


Step #4: Create Content

We are going to create 3 nodes of type Service:

  • Tutorials
  • Videos
  • Books

Each one of these nodes will be associated with a second-level element in the mega menu. On the other hand, we are going to create about 10 nodes of type Blog with different terms associated with them. Make sure that you include 2 of the terms (ex.: D8, WP) with more frequency than the others.

200414 menu item extras 008

 

The Content screen should look at the end of this process more or less like the image below.

200414 menu item extras 009


Step #5: Create the Menu Items

The first level of the main menu will have the following menu items:

  • Home
  • About
  • Resources
  • Contact

Each one of the menu items will have an additional (extra) field. This field will be set at the second level of the menu, that is, each one of the card items in the mega menu. This field will allow us to present each one of the view blocks.

  • Click Structure > Menus.
  • Click Edit menu, to edit the Main navigation.

200414 menu item extras 010

  • Click Add link 3 times to add the missing first-level menu items.
  • Click Save each time you enter a menu item name.

Use the special tag to display only the link text.

200414 menu item extras 011

200414 menu item extras 012

Once you have created and rearranged the links of your menu,

  • Click Manage fields > Add field, to add a field to the menu items.
  • Select a field of type Viewfield.
  • Give it a proper name and label.
  • Click Save and continue.

200414 menu item extras 013

  • Set the Allowed number of values to Unlimited.
  • Click Save field settings

200414 menu item extras 014

You will have the option to link a default view to this particular field. Leave these fields empty.

  • Scroll down and click Save settings
  • Click Manage display.

200414 menu item extras 015

  • Hide the menu card label.
  • Click Save.

Step #6: Create the Views

  • Click Structure > Views > Add view
  • Show Content of type Services.
  • Create a block with an unformatted list of fields.
  • Choose to show 3 items per block.
  • Click Save and edit.

200414 menu item extras 016

  • Add the Service image field
  • Set the image style to Thumbnail and link the image to the Content.
  • Click Apply

200414 menu item extras 017

  • Add the Intro text field as well.
  • Rearrange the fields.
  • Click Save.

200414 menu item extras 018

  • Click Structure > Views > Add view
  • Show Content of type Blog.
  • Create a block with an unformatted list of fields.
  • Choose to show 1 item per block.
  • Click Save and edit.

How to Use the Menu Item Extras Module for Drupal 8

  • Add the field Category.
  • Click Add and configure fields.
  • Click the Multiple field settings.
  • Select Unordered list.
  • Set the number of values to display to 3.
  • Click Apply.

 

200414 menu item extras 020

  • Remove the Sort criterion
  • Click Apply.
  • Click Save to save the view.

Step #7: Add the View Blocks to the Menu Items

  • Click Structure > Menus
  • Edit the Main navigation.
  • Edit the menu item Resources.
  • Add the 2 blocks you created in step # 5.
  • Click Save.

200414 menu item extras 021


Step #8: The CSS Styles

I am not going to explain this code in detail since it is out of the scope of this tutorial. However, you can research more about Drupal Views and CSS Grid in this article. If you want to practice more with mega menus, take also a look at this article.

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .field--name-field-menu-card .field__items {
display: flex;
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
top: 166px;
width: 100%;
z-index: 10;
}

#block-bartik-main-menu a,
#block-bartik-main-menu li span {
background: transparent;
text-shadow: unset;
color: whitesmoke;
}

#block-bartik-main-menu .menu-item {
display: grid;
align-content: center;
justify-content: center;
}

#block-bartik-main-menu .menu-level-0 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

#block-bartik-main-menu .menu-dropdown-0 {
position: absolute;
left: 0;
width: 100%;
padding-top: 16px;
background-color: rgba(141,139,132, 0.9);
}

.view-tutorials .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.view-tutorials .views-row {
display: grid;
justify-items: center;
}

.view-tutorials .views-row span > a {
font-size: 1.3rem
}

.view-tutorials .views-row .views-field-field-intro-text {
font-size: 1rem;
}

200414 menu item extras 022

I hope you liked this tutorial. Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.