Main Navigation Setup
This tutorial will teach you how to create and configure the main navigation on a Drupal site. It also contains information helpful for troubleshooting issues that arise with the menu system.
You don’t need to fully understand how the menu system works to create or edit menus. But knowing how the parts fit together can make it easier to edit menus, as it will help you understand why each piece gets configured/edited where it does.
If you’re curious to learn more, watch for extra info in the expandable accordion sections. The following terms may also be useful:
- Blocks: these are parts of a website’s layout. You’ve likely seen them in Layout Builder, where we use Custom Block Types to manage and style content. There are other types, like System Blocks, View Blocks, and Menu Blocks. Blocks can be placed and reused in Layout Builder (usually on one page) or in Block Layout.
- Block Layout: (found under Structure > Block Layout) is where you place blocks that you want to appear across the whole site or a section of it—not just on one page. It’s made up of Regions.
- Regions: These are areas within the Block Layout where you place blocks. These regions are defined in the site’s theme, which in our case is called Ashlar. Because they are defined in the theme, Regions are usually not very flexible. But we use a module that allows us to create new regions on the fly, so that we can create complex menu systems.
Basic Menu Setup
1. Create the Menu
In most instances, you will want to use the pre-existing Main navigation menu block. It can be found under Structure > Menus > Main Navigation
Alternatively, you can create a new menu under Structure > Menus > Add menu. In this case, add your menu title and click Save, then continue with these instructions. Substitute your menu with anywhere Main navigation is mentioned.
Core Menu Blocks come built into Drupal. You can find them under Structure > Menus.
By default, they just show a simple list of links, which we style using the site’s theme.
On their own, Core Menus are pretty basic—they don’t support complex layouts or interactive features. That’s where Ultimenu comes in, which we’ll cover later in the tutorial.
2. Create the Top Level Menu Items
First you will build out your Top level navigation. The top level navigation can consist of two different types of menu items:
- Direct links to pages
- Drop down menu items, with nested menu(s) as children
On this website, the top level navigation looks like this:
In this case, Home, About Webtech, Our Work, Architectural Decision Records, and News & Events are direct links, whereas Request Help and Web Resources serve as drop-downs with child items.
2a. Direct Links
Direct Links: Via the Menu
To create direct links, with no children, click Add Link while in Structure > Menus > Main Navigation
The Menu link title field is the text that shows up in the menu. In the Link field, you can either search for content on the site, or you can paste an external URL.
Direct Links: Via the Node
Another way to add links to the menu is via the Menu Settings on the individual page or node.
Navigate to the page, then click on the Edit tab.
Open up the Menu Settings accordion and fill in the Menu link title (this will autopopulate with the node title, but can be changed). Then set the Parent Link to Main navigation.
2b. Drop-Downs
Link Settings
While in Structure > Menus > Main Navigation click on Add Link.
Set the Menu link title field to the link text, and set the Link field to #
Under Display settings, check Show as expanded
Ultimenu Settings
Next, go to Structure > Ultimenu.
By default the Ultimenu blocks tab will be open. If it's not already checked, check the box next to Main navigation and click Save configuration.
Then, click on the ultimenu regions tab, and find the menu item you just created. Check the box next to it, then click Save configuration.
Ultimenu is a Drupal module, or add-on, that allows for complex menu creation.
Because Ultimenu is a module, it has it's own configuration settings under Structure > Ultimenu, separate from the menu settings.
When we click an option to create an Ultimenu block, we are creating a second instance of that menu tree that Ultimenu can see and interact with. When we enable a menu item as an Utlimenu region, it does two things:
- Allows Ultimenu's script to make that item into an expandable drop-down
- Creates a new region under Structure > Block Layout. This means we can place other blocks inside the menu.
Typically the Blocks that we place in the Ultimenu Regions are other menus, but this set up also allows you to place any of our custom blocks into the menu drop down.
3. Place & Configure the Menu Block
Go to Structure > Block layout.
Locate the Main Navigation region and click Place block for this region.
Find the Ultimenu: Main navigation block and click Place block. It is important that you place the Ultimenu block, and not the generic Menu block.
Find your newly placed block and click Configure.
Find the Render submenu setting, and check this box.
Ultimenu has a lot of functionality that we do not use, so nearly everything else on this configuration screen can be left as their defaults, unchecked, or set to "None." The screenshot here shows the ideal settings for a standard menu.
4. Add Simple Submenus
In a basic menu, submenu links can be added following either of the Direct Link instructions from above.
After the link is added, on the Structure > Menus > Main navigation screen, drag and drop the menu link so that it is nested underneath it's top level parent item.
Navigate back to the site, your nested menu should now be in place.
Advanced Menu Setup
Multiple Columns / Additional Content Blocks
If you would like to have more complex menus with multiple sections underneath the top level menu items, you need to create Additional Menu Blocks and place them inside the Ultimenu region you generated when configuring the Ultimenu Settings.
1. Create a New Menu Block
Go to Structure > Menus > Add Menu.
Name the menu block and click Save.
Now, begin Adding Links following the either of the directions in Step 2a. Direct Links
2. Place the Menu Block in the Ultimenu Region
Go to Structure > Block layout and locate the region for your top level menu item that you created in Step 2b Drop-Downs. Click Place block.
Search for the menu block that you created in the previous step, then click Place block.
Navigate back to the site, your menu should now be in place.
While the most common use case is to place Menu Blocks inside the Ultimenu Regions, you can place any other type of block. This includes any of our custom block types, image blocks, system blocks, etcetera.
To add custom block types, they will need to exist in the Custom Block Library. Go to Structure > Block layout > Custom block library, then click Add content block to create your content block. Then follow the instructions in this section to place your newly created content block.
Troubleshooting
First, try clearing the cache
If that doesn't work, make sure that the Show as expanded option is checked under the Link Settings, and that the Render submenu option is checked under the Menu Configuration.
The system keeps track of the Ultimenu regions based on the menu item name. If the name changes, then Ultimenu loses track of the region. To fix this problem:
- Recreate the region by following the steps under Ultimenu Settings
- Usually, when a menu item is renamed, these blocks will get disabled and will get placed in the Western Header region. Go to Structure > Block layout, and drag these blocks back down to the region you just recreated. Then click Enable next to each block to turn them back on.