How to Set Up Dropdown Menus in Drupal 8

Parent Feed: 
How to Set Up Dropdown Menus in Drupal 8

A few years ago, we published a very popular post called "How to Create Dropdown Menus in Drupal".

That post focused on Drupal 7, and some things have changed in Drupal 8.

Here's an updated explanation of how to set up dropdown menus for a Drupal 8 site.

Step #1. Choose a theme with dropdowns

Before you can use a dropdown menu, choose your theme carefully.

Many themes don't have dropdown menus built-in. That includes Drupal's core themes, such as Bartik. Unless you want to make major code changes, it is best to choose a theme that already have dropdowns available. To find out whether a theme does have dropdowns, read the theme's description and documentation on Drupal.org.

If your theme doesn't support dropdowns, we do have a guide to adding a dropdown menu using a module.

Step #2. Create the dropdown links

If you want dropdown menus, you'll need to arrange your menu links in a parent-child relationship:

  • Go to Structure > Menus > Main Navigation.
  • Drag-and-drop your menu links to that they are in a hierarchy:

menu indented in Drupal 8

Also, edit each menu link and check "Show as expanded". If you don't choose this option, the dropdown link will only show if you are on the page being linked to.

show as expanded

Step #3. Places the menu block

In Drupal, menus are normally placed by using blocks:

  • Go to Structure > Block layout.
  • Click "Demonstrate block regions"
  • You'll now see a layout of your theme's regions. It should be clear where your menu should be placed. In this case, use the "Navigation" region. 
  • In this example, move the Move the "Main navigation" block to the "Navigation" region.

Your dropdowns will not appear unless your menu block is in a block region that supports dropdowns.

breeze-regions

Step #4. Configure your menu block

This is the major change in Drupal 8 in regards to dropdown menus. You must configure your menu block.

  • Click "Configure" next to the "Main navigation" block.
  • Change "Maximum number of menu levels to display" to more than 1.
Editing the menu block in the Breeze Drupal 8 theme

Step #5. Check the end result

If you make the changes listed here, your dropdown menus should appear:

Dropdown menus in the Breeze Drupal 8 theme

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web