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, 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“.

Author

  • Steve Burge

    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.

0 0 votes
Article Rating
Subscribe
Notify of
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Marco
Marco
5 years ago

Hello,

my dropdown menu doesn’t works: it shows all sub-items like an expandend menu (but isn’t)…. so, how can I know if my block region supports dropdowns?

Thanks!
Marco

ravi patil
ravi patil
4 years ago

if we are using any other theme except basic ones , the submenus are not been displayed

George
George
4 years ago

This advice is working only for Main Navigation only!

Geoffrey Dow
Geoffrey Dow
3 years ago

Thank you! I’ve only just come back to Drupal after quite a few years – to 8.5 from 5 or 6.something – and I was starting to tear what’s left of my hair out of my head over this. So thank you again, you’re explanation was quick, clear and concise!  🙂

Geoff

mikall
3 years ago
Reply to  Geoffrey Dow

Geoff,  So glad that you found answers/help inside of the OST space.  Don’t hesitate to search our blog or check out our video classes for more Drupal insights.  Also, our YouTube channel (OSTraining) has a very popular Drupal 8 course uploaded there.  Thanks for taking the time to comment! We appreciate feedback, and it makes us happy to know that we are doing is making a difference.

pierrot.achats@free.fr
pierrot.achats@free.fr
2 years ago

Many thanks for this [u][b]ESSENTIAL[/b][/u] tip and trick!! For information, I’m using Bootstrap 3 theme and it still works on Drupal 9.

Many thanks again
Pierrot

6
0
Would love your thoughts, please comment.x
()
x