# Exercise 1.4: Build the related links menu

In this exercise, we’ll add a Related Links menu item. This can be broken into two stages:

## Adding the custom menu

1. Go to the menu administration page – /admin/structure/menu - hover over *Structure* on the *Admin menu* then click *Menus*. Click on the **Add menu** button at the top right of the page.
2. Type in the name of our menu in the *Title* field: **Related Links**.
3. Type in a menu description in the *Administrative summary* field. While the description is optional, it helps site administrators understand the different menus, especially if the site has lots menus.
4. Click **Save** to create the new menu.<br>

   <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2F9a81O3d2dhkeJ8KJJsMl%2Fimage.png?alt=media&#x26;token=74b1de7a-e36a-4211-be91-eb8cae98fe61" alt=""><figcaption><p>Add menu screen</p></figcaption></figure>

## Add menu items to the related links menu

Now that you’ve created the custom menu, you need to add in the **links** to existing pages. You can do this in one of two ways:

* Adding links to the menu when you edit the specific content pages/section.
* Adding the items manually via the menu interface.

### Add Related links menu option to Basic page content type

1. On the *Admin menu* hover over *Structure* → *Content types*, then click on **Page**.
2. Scroll down and click on the “Menu settings” item. Under Available menus, enable Related links.
3. Click **Save content type**.

<figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FBS2ygXg2FIpDzc49RAeR%2Fimage.png?alt=media&#x26;token=80b48522-20fc-46d6-8181-c9f7bc404828" alt=""><figcaption><p>Adding Related links to Page content type</p></figcaption></figure>

### Add several new Pages to build menu links

Add content using the Page content type and create the following new pages:

* About us
* FAQs
* Disclaimer
* Privacy policy

Make sure you select "Provide a menu link" and select the parent item "Related links" for all pages. See the screenshot below for an example.

<figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FStjr45IR8oi6iaDp7qWl%2Fimage.png?alt=media&#x26;token=eeb618e4-5320-4672-8fe3-c1b8eb7ecb42" alt=""><figcaption><p>Creating About us page and adding a menu link to Related Links</p></figcaption></figure>

## View Related Links menu

On the *Admin menu* hover over *Structure* → *Menus* then click on **Related links**. The new pages you created now appear in this admin area.

<figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FIdYqAP5eaEPGqaxjaMWK%2Fimage.png?alt=media&#x26;token=9a7110d8-34c9-4bce-9e4c-8616df4c4cfa" alt=""><figcaption><p>Showing links in the Related Link Menu</p></figcaption></figure>

You can also add the links manually by following these steps:

1. In the menu administration page, click **Add link** at the top of the Related links. At the menu link creation page type in these settings:
   * **Link:** type **About** and select **About us**.
   * **Description:** Jobs Posting About Us page.
   * **Menu link title**: About us
2. Leave the other settings at their defaults and click **Save**.
3. Repeat the steps above for any remaining menu items.

Finally, you can re-order the links on your menu.

1. Go to *Structure* → *Menus* to see a list of all your site’s menus.
2. Click on **Edit menu** to the right of the **Related links** menu entry. You should see a list of the menu items we just created as in the previous screenshot.
3. You can drag and drop the menu items to re-order them. Then click **Save configuration**.

![Image of reordering related links menu](https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-c4d74a20a8f726d0b879386cc1ed6b023adc506a%2FEx-1-4-Related-Links-menu-2.png?alt=media)

{% hint style="info" %}
**Note:** Another way to change the menu order is to change the ‘weight’ of the menu item when you’re editing the content.
{% endhint %}