By: Krishna Sai
September 10 2018

Create Menu for Vocabulary in Four Easy Steps in Drupal 8

E-commerce is the buzzword in today's era. It has successfully allowed people to shop without stepping out of their comfort zone. Making the visitor experience smooth is part of UX. Menus are therefore created to categorize the products. 

The extensive list is called vocabulary in Drupal. In this blog, we will create a menu for Vocabulary in Drupal 8 with an example of SUV.

Categorical list of items in amazon

Decoding the Term: What is Vocabulary?

Vocabulary is the root domain for the taxonomy. These are the terms which act as the classifier for the domain. Agencies use vocabulary to group the entities into a single chunk while developing their applications.

Suited for e-commerce, Drupal allows vocabulary through Taxonomy which is part of the core, now. The module allows you to describe the entire content of the web page in Drupal. It helps categorize terms into TV, Appliances, Electronics, Home, basically whatever you want. 

In Drupal, you first need to create a vocabulary. We will use the example of cars.  Each car will act as the name of vocabulary and the types of cars will come under the terms. The image below explains the categorization of cars better. 

a red car with a face with car vocabulary listed underneath

Why Opt for Menu?

Menus help us navigate to the desired page. 

admin interface with structure, content types, article

To create a menu for any kind of vocabulary we have to first integrate our vocabulary with the menu. And then install the above packages. 

Taxonomy_menu module manages the integration process of the menu and the vocabulary is created through taxonomy to create a menu like the image below. 

sample menu with four items listed

There are several prerequisites before using the taxonomies.

If we want to create a menu for the vocabulary which we need to use the taxonomy_menu module for linking the taxonomy with the menu.

Next comes the tokens to complete the tasks by holding small placeholders and to make the URL for the terms of the vocabulary. This is done by integrating the Pathauto module.

To get the content in the desired layout we use views menu. Below is a list of the modules required when developing the menu for any kind of vocabulary.

  • Taxonomy menu
  • Token
  • View (Part of Drupal 8 core)
  • Path auto

Follow the below mentioned steps to create a menu quickly for any kind of vocabulary in Drupal 8 for a complicated e-commerce website. 

  • Step 1: Create a vocabulary.

    Navigate to structure → taxonomy→ add vocabulary.
admin interface with admin toolbar and auto mobile expo in the heading structure

 

adding vocabulary with name and description field


I have added "cars" as the vocabulary name. And then click on Save. It will redirect to the page which will ask you to add the terms.

admin interface with content added on list tab

Add terms and you will be redirected to the page where you have entered the child node names.

admin interface with adding terms and name of term and url aliasing highlighted

What is URL Aliasing?

URL aliasing gives the shorter name or another alternative name for the nodes in the Drupal database. Drupal uses "nodes" to identify pages by their position in your database. So your page on "SUV" might come as "node/12" to Drupal.

By maintaining the list of nodes in your site, the URLs are maintained as a result of which your visitors can find your site's content easily with easy to remember URLs. When we want to navigate to a particular term in the midst of over website we simply type in the URL after www.menu_vocabulary/SUV. 

three blocks on left and a grey car on right with "suv" as heading


Though it’s not a mandatory field it’s very handy if we use the URL aliasing field. This makes our navigation easy.

Save the changes and you will be redirected to the add term page where you need to add a number of terms under vocabulary.

  • Step 2: Create a menu for the web page.

    Navigate to structure→ Menus → Add menu → Add title → Save. 
admin interface for adding menu


Once saved, you will be redirected to make a link to the menu. Here comes the taxonomy_menu into the scene.

Admin interface with five columns in the first row and one single column in the second row

 

  • Step 3: Navigate to Structure → Taxonomy menu → Add taxonomy menu
admin interface for adding taxonomy menu

Fill the label name and select the vocabulary which you want to link up with the menu. Select the menu dropdown with the menu name you have created and save the changes. 

You can rearrange the terms of the vocabulary (can be called as menu items, now) by simply holding the cursor on the plus sign at the very beginning of every menu items.

Once satisfied with the rearrangment, save to commit the process. 

admin interface with six items listed


Navigate to Structure→ Menus→ Four wheeler automobiles, a window showing that all the terms in the vocabulary are imported into the menu. This is done by the taxonomy_menu module.

admin interface to edit four wheeler auto mobiles
  • Step 4: Place the menu on the block.

     Navigate to the Structure → Block layout → Choose the region your block should present → Click on Place block.
admin interface for positioning block


Once saved, search for the respective menu name you want to place. And then click place block again.
 

admin interface to place block with a table of three rows and three columns below it


After clicking place block you will get a pop-up box asking to configure the block position. Select the region and click on save block.
 

admin interface with configuring the position of the block

Save your menu and the sidebar will appear as desired. 

admin interface of menu block in sidebar


For the home page, I also added some content so it is easier to understand the menu. Adding a vocabulary to any kind of menu is quite simple and can be done in these 4 easy steps.

Some user interactive modules can be created using the modules like Superfish, Nice_menus etc.

three blocks on left and a red car on right with upcoming cars auto expo written on extreme right of the car
Final homepage

Leave your comments below and let us know which vocabulory did you create.