Drupal 8 Menu Tutorial And How To Create Dropdown Menus

let's explore Drupal 8 menu system to manage menus you go to structure menus and then we'll edit the main menu by clicking the edit menu link now you're looking at an overview of the links in your main navigation and here you can edit and delete links and also change the order of links by dragging and dropping the icon to the left to create a new menu link press the add link button at the top of the page in the first field we fill in the menu link title which will be the link text for your menu link in the second field we enter the destination of the link which can be an internal path or an external URL now click Save and go back to the menu to check that it worked that looks so good now let's get into the topic of drop-down menus and the easiest way to show you is to look at the glazed theme main demo installation profile which includes a lot of demo content and also a whole lot of drop-down menus let's go back to the main navigation admin page now the trick to drop-down menus in Drupal is in the indented menu items at the top we have the home pages link and all the items below it that are scooted over to the right form the drop down menu below the home pages link you can drag the handle to move the links in and out of the drop down menu for example if I drag this home landing page link above the home pages link and to the left and save the page we will see that this link will now appear outside the drop down menu now let's the menu back together and I'll show you how to create a new drop-down from scratch we enter a menu link title for example my drop-down enter a link path and most importantly you have to check this checkbox show as expanded otherwise Drupal will not render your drop-down menus on every page now we have our top-level menu item and we just need to make some menu items that will be inside the drop-down we achieved this by going to the parent link select box and selecting our mine drop-down menu item now I'll just create several more of those you and there is our brand new drop-down menu now in clay steam we don't need a module like superfish because the theme itself supports drop-down menus however if your theme does not support drop-down menus like the default Bartik theme in Drupal 8 you need a module the most popular Drupal module for drop-down menus is superfish which is by the way not affiliated with supervenes this is the superfish modules drupal.org project page where you can download the module and there's also a link to a separate library that you'll need and here you see a fresh installation of Drupal 8 default profile with the Bartik theme enabled I've already added a couple of links now let's enable the module and see how it works superfish enabled that install now we go to structure and block layout because superfish provides its own menu blocks we will first remove the original main navigation block and then press place block in the primary menu region and then we find the superfish blocks and there's a block for each menu let's place the main navigation block you can see there's a ton of settings we just want to hide the title I don't know what all these settings do but let's just save the block and see what we get well we don't see much happening now because we have to structure our menu to go to structure menus edit menu fix that right up okay now let's indent these links to make them into a drop-down menu save that and now we just go back to the menu to set the home item as expanded and that's the results it clearly needs some themeing because it doesn't match the theme at all but now you've seen two solutions for building a drop-down menu in Drupal and superfish menu has a lot of options but the drop down menu system in glazed theme as the advantage that it's really designed for the theme it looks right out of the box it has a well designed mobile experience and it's also customizable for the glazed theme settings panels which offers a lot of flexibility in design and layout of the menu

Channel: DXPR

Views: 20,529

Rating: 4.1384616 out of 5

Keywords: drupal 8, menu, drupal, dropdown menu, superfish, glazed, sooperthemes

Id: xZ7HIoP__qI

Length: 6min 3sec (363 seconds)

Published: Tue Apr 24 2018