Creating menus in Drupal 8

When offered a lucrative menu, your guests will certainly want to taste more of your website’s “dishes.” Menus and breadcrumbs are truly useful elements of website navigation, which, in its turn, is the keystone of usability. Ready for something interesting? Our special for today contains the tastiest tips on creating menus for the freshest Drupal version — Drupal 8! Make yourself comfortable and enjoy.

Menu system in Drupal 8

Handy interfaces for creating menus have always been among Drupal’s strengths. Drupal 8 offers one, too, with a bunch of additional niceties. For example, menu blocks are now included in the core.

At first glance, the main UI for creating menus is not so different from that of Drupal 8’s predecessors. The most remarkable difference lies in the architecture, so let’s take a little glance at it.

In Drupal 8, the routing system has been rebuilt with the use of Symfony components. The routing system is now responsible for path access and many other things. It has taken the leading role in menu creation replacing Drupal 7’s hook_menu(). The menu link configuration is now conveniently stored in separate YAML files.

Creating a menu in Drupal 8

Let’s now take these simple steps and create a multi-level menu using Drupal 8 core capabilities.

Step 1: Creating your Drupal 8 menu base

Go to “Menu” — “Structure” and select “Menus” among all available structures. You will then see a list of your current menus. Click “Add menu” to create a new one.

This will open a new page, where you will need to describe your menu with “Title” and, optionally, “Administrative summary,” so it’s easy to find on the backend. For example, let’s set the title as “Sidebar menu.” Click “Save.”

Step 2: Adding links to your Drupal 8 menu

A menu without links won’t lead your guests anywhere. So let’s add menu links using the “Add link” button. You will arrive to your new link settings page and need to do the following:

• Create a title to be shown on the link. For example, “Drupal 8 blog posts.”
• Provide the link path using /node/add or a URL.
• Optionally, add a description that will appear when users hover over the link.
• Check or uncheck the “Enabled” box to show or hide this link.
• Check the “Expanded” box if this link is going to have children links.
• Select the parent link to define where your link belongs. In our case, this is “Sidebar menu.”
• Optionally, set the link weight that will determine its priority compared to other links at the same structure depth (0 is top).
• Click “Save.”

To have a multi-level structure, click the “Add link” again and create a child link with a  similar procedure. For example, it can be named “Creating menus in Drupal 8,” with its parent link set as “Drupal 8 blog posts.”

Step 3: Placing the menu block on your website

It’s time to find a place for your new menu. Go to “Structure” — “Block layout.” You will see a list of your website’s blocks, specific to each Drupal theme. Select the one you want to assign your menu to (for example, “Sidebar first”) and click “Place block.”

This will open a list on which you will need to find your new menu (if necessary, with the help of the search box) and again click “Place block.”

You will then be able to make settings. You can set the menu title as something different from “Sidebar menu.” Also, you’ll have a chance to configure the level from which the menu starts to show (from parent to children), and the maximum number of levels to display. Optionally, you can set restrictions for the menu display in terms of content types, pages, and roles. Click “Save blocks.” See how it all looks on your website and change the position with the “Edit” button.

“Complement from the chef”, or extra Drupal 8 menu modules

This is not all! This is just a brief description of the basic steps to create your Drupal 8 menu. You could go ahead and grab some extra modules like Responsive and off-canvas menu (which we reviewed in detail), Superfish, Menu block, Nice Menus, Simple Mega Menu, etc. Check out their additional opportunities for designing your responsive, multi-level menus, mega menus, menus driven by jQuery and so on.

Moreover, real miracles can be made by developers in creating unique menus through the power of Bootstrap, Twig, CSS, and so much more.

Contact our Drudesk developers right now if you need assistance in bringing your ideas to life about menus on your Drupal 8 website. Your awesome menus are waiting to attract your guests!