How to install a custom menu in Drupal 8

Once you’ve installed Drupal on your server, one of the first steps in building an attractive and simple to use site is creating a navigation menu. The platform includes a number of default menus, but you can also create a custom menu in Drupal 8. Follow these steps to learn how.

First, log in to your Drupal administration dashboard. Select Structure from the top navigation bar, then click Menus.

Menu

In the page that appears, select + Add Menu.

Add menu

Provide a menu Title and Description, which will be used to identify the menu. Click the Save button to proceed.

Save

You can now add items and links to the custom menu. Click + Add link to get started.

Add link

Create each menu link using the following information:

Creating links

  • Menu link title – the text that will be used for the link in the menu.
  • Path – the destination to be navigated to when a user clicks the link. This can be an internal (local) link or an external URL.
  • Description – descriptive text that will be displayed when a user hovers over the menu.
  • Enabled – uncheck this box to hide the menu item.
  • Show as expanded – if selected and you’re creating a nested menu, child links will be displayed by default.
  • Parent link – if this link is a child of an existing menu item, select it from the dropdown menu.
  • Weight – helps determine the order of the menu links: items with lower numbers are positioned nearer the top or left, while higher numbers are positioned towards the bottom or right.

Link example

Click the Save button to proceed.

Continue adding links until your menu is complete. You can drag and drop menu items using the handles to the left of each item. Click Save configuration to lock in your changes.

Handles

With the menu created, it now needs to be assigned to a block to ensure it is displayed on your pages. From the top menu, click Structure, then Blocks.

Block editor

Note that each Drupal theme has its own block layout page, so you’ll need to locate the correct setting on the page to assign the menu to the appropriate block. Locate your custom menu in the list of disabled blocks and drag it to the block to which it should be assigned.

Header

Click the Save blocks button at the bottom of the page to proceed.

Click the Configure button to customize how and where the menu is displayed. Visibility settings allow to target the menu at specific pages, content types, user roles, and specific users. Click the tabs to cycle through the options.

Block configuration

Click Save block to complete configuration and preview your menu on screen.

Custom menu

If you notice any problems or if you need any help, please open a new support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.

 

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache