| Drupal

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

That post focused on Drupal 7, but 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

If you want a more advanced dropdown menu, check out "Dropdown Menus in Drupal 8 With the Superfish Module".


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.