Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Build a Blog in Drupal 8: Create and Manage Menus

Parent Feed: 

This tutorial is part of the “Build a Blog in Drupal 8” series:

  1. Content types and Fields
  2. Adding Comments
  3. Using Views
  4. Managing Blocks
  5. Create and Manage Menus
  6. Custom Contact Forms

A website’s navigation plays an important part in how easy a site is to use. It’s essential that you spend time fleshing out the overall IA (Information architecture) or you’ll end up with a site that’s hard to use and difficult to navigate through.

Previous versions of Drupal have always offered a simple interface for managing menus, and Drupal 8 is no exception.

In this tutorial, we’ll continue building our site by adding in some menus. We’ll create a custom menu which’ll be used to display links to popular categories, then create an “About us” page and add a menu link to the footer.

This tutorial is part of the “Build a Blog in Drupal 8“. Make sure you’ve read the previous tutorials if you want to follow along.

How to Manage Menus

When you install Drupal 8 using the Standard Installation profile, a menu called “Main navigation” is used as the primary site navigation with the single link called Home. Another, called Footer, is used in the footer region with the single link pointing to the contact form.

Fig 1.0

Create Menu

Let’s now create a custom menu which’ll display a list of curated popular categories. On a blog, these links will help you promote categories and send traffic to those pages.

1. Go to Structure, Menus and click on “Add menu”.

2. Enter “Popular categories” into the Title field and “Curated list of categories.” into “Administrative summary”. Then click on Save.

Fig 1.1

Once it’s been created, you’ll be redirected to the menu edit page. You’ll be able to manage all menu links from here.

Create Menu Link

1. Now click on “Add link”.

2. Enter “Drupal content” into “Menu link title”, enter in the taxonomy term URL to your Drupal category. On my site it’s “/taxonomy/term/1” so I’ll enter that in. Then in Description, enter in “Latest Drupal content.”

Fig 1.2

The Link field is something which is new in Drupal 8 and it allows you to link directly to internal content pages by typing in the title of the content.

However, the autocomplete will only work for node content. You can’t search for a taxonomy term. You can add one manually by adding the internal URI e.g, /taxonomy/term/1. You can also link to external pages or domains just by entering in the absolute URL.

Fig 1.3

Place Menu into Region

Now let’s go and add our new menu into the footer.

1. Go to Structure, “Block layout” and click on “Place block” in the “Footer first” region. Search for “Popular categories” and click on “Place block”.

Fig 1.4

2. Leave the “Configure block” modal pop-up as is and click on “Save block”.

3. Don’t forget to click on “Save blocks” at the bottom of the page.

4. Go to the homepage and in the footer region you should see the menu.

Fig 1.5

The menu links can be managed by hovering over it and clicking on “Edit menu”.

Fig 1.6

Create About Us Page

Now we need to create an “About us” page and place a menu link in the main navigation so it’s easily accessible. We’ll add the menu link directly from the content edit form.

1. Go to Content, “Add content” and click on “Basic page”.

2. In the Title field add “About us” and some text into the Body field.

Fig 1.7

3. In the right sidebar, click on the “Menu settings” vertical tab then check the “Provide a menu link” checkbox.

Fig 1.8

From this settings, you can set the menu link title; this is automatically pulled from the Title field. If you want text to appear when you hover over the link, then add it to the Description field.

The “Parent item” drop-down lets you select a parent menu link or a menu group. By default you can only add menus to the “Main navigation” but other menus can be accessible from this drop-down if configured.

Finally, the Weight field lets you control the order in which the links will be displayed. But I recommend you reorder the links from the menu page because it’s much easier.

Once you’ve defined the menu link, scroll to the bottom and click on “Save and publish”.

4. Now in the header you should see the “About us” before the Home link.

Fig 1.9

Reordering Menu Links

In the image above, “About us” appears before the Home link which is not ideal. Let’s reorder the links so it’s Home first then “About us”.

To reorder the links you must go to the menu edit page and this can be done in two ways. First, you can edit the menu by going to Structure, Menus and by clicking on “Edit menu” in the “Main navigation” row. Another way, is to hover over the menu and click the edit icon then “Edit menu”.

Fig 1.10

Once you’re on the edit menu page, simply drag the Home menu to the top and then click on Save.

Fig 1.11

Now Home should be the first link in the menu.

Summary

From a site building standpoint, the UI for managing menus has stayed relatively the same. If you know how to manage menus in Drupal 7 then you should be fine in Drupal 8.

But from an architectural standpoint, the routing system in Drupal 8 has been rebuilt using Symfony components. If you want to learn more about the technical changes check out this great post, “What Happened to Hook_Menu in Drupal 8?“.

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