---
title: "Creating menu templates"
date: "2017-11-14T11:12:46+00:00"
summary: "Learn how to create and implement custom menu templates in Drupal using Site Studio. Follow our step-by-step guide to design single-level menus, add them to master templates, and enhance your site's navigation structure effortlessly."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-menu-templates"
id: "5ffeb336-d410-4f12-a62c-c87b2dd067ea"
---

You can create templates for Drupal menus. The steps below describe how to create a simple single level menu template and add it to a Master template. You should start by using this guide but if you require a guide to creating more complex menus, see [Creating multi-level menus with interactivity](/drupal-starter-kits/add-ons/site-studio/creating-multi-level-menus-interactivity "Creating multi-level menus with interactivity").

Create a single level menu template
-----------------------------------

### Step 1 - Create the menu template

1.  Navigate to Site Studio > Templates > **Menu templates**
2.  Click **+Add menu template**
3.  On the next screen, enter a name for your menu in the **Title field.**

![6fa61769-create-menu-template.png](https://acquia.widen.net/content/0787c021-7b2e-4d15-98e2-d9c8fcaa81bf/web/6fa61769-create-menu-template.png)

### Step 2 - Layout the menu template

Add three Menu elements in the order shown below to create your menu structure.

1.  Click the **+plus icon** on the Layout canvas to open the Sidebar browser
2.  Drag a **Menu list container** element onto the Layout canvas. This is a **<ul>** element.
3.  Drag a **Menu list item** element into the Menu list container on the Layout canvas. This is an **<li>** element
4.  Drag a **Menu link** element into the Menu list item on the Layout canvas. This is an **<a>** element.

![89370dc3-layout-menu-template.png](https://acquia.widen.net/content/94843855-a0f7-4fc5-a4dd-0fb1d4a31b1a/web/89370dc3-layout-menu-template.png)

### Step 3 - Configure the Menu list container element

1.  Double click on the **List container element** to edit its settings
2.  Within the List container element you can select a List style for your menu. For this example, leave this set to **None** and your menu will use your Base unordered list style. For more information, see [Creating styles for menus](/drupal-starter-kits/add-ons/site-studio/creating-styles-menus "Creating styles for menus")
3.  Click **Apply.**

![ba960ca0-configure-menu-list-container.png](https://acquia.widen.net/content/b88f7929-695d-46bc-bc89-0801fdebdda1/web/ba960ca0-configure-menu-list-container.png)

### Step 4 - Configure the Menu list item element

1.  Double click on the **List item element** to edit it's settings
2.  In the Child list visibility, select **Initially visible**
3.  Click **Apply.**

![ceb99238-configure-menu-list-item.png](https://acquia.widen.net/content/3a4e1d3a-8b4f-468b-949a-9539b1aafd11/web/ceb99238-configure-menu-list-item.png)

### Step 5 - Configure the Menu link element

1.  Double click on the Menu link element to edit it's settings
2.  Within the Interaction field, select **Click through to link**
3.  Click **Apply.**

![c17bd9b4-configure-menu-link.png](https://acquia.widen.net/content/a630d1ff-e8ea-4ab8-bcee-d8457ef49f0a/web/c17bd9b4-configure-menu-link.png)

Add a menu to a template
------------------------

These steps assume that you have already created a [Master template](/drupal-starter-kits/add-ons/site-studio/creating-master-templates "Creating master templates"). It also assumes that you have created a Drupal menu to use on your website. If not, you should create these before continuing with the following steps.

### Step 1 - Add the Menu element to a Master template

1.  Navigate to Site Studio > Templates > **Master template**
2.  Select a Master template and click **Edit**
3.  On the next screen, click on the **+plus icon** to open the Sidebar browser
4.  Drag the **Menu element** into your Template. Place it at the top of your template so it's obvious where the menu is going to display.

![da48bedf-add-menu-to-master-template.png](https://acquia.widen.net/content/6b37b57f-3c62-4227-9b13-061d3f23eb81/web/da48bedf-add-menu-to-master-template.png)

### Step 2 - Configure the Menu element

1.  Double click on the **Menu element** to configure its settings
2.  Within the **Menu field**, select your **Drupal menu**
3.  Within the **Template field**, select your menu template
4.  Click **Apply.**

![368da4f3-configure-menu-element.png](https://acquia.widen.net/content/e69b079c-e36b-4a15-83cb-9543c1c49421/web/368da4f3-configure-menu-element.png)

### Step 3 - Save your template and view a page

1.  Click **Save and continue** at the bottom of your template
2.  Navigate to a page which uses the template
3.  If you have followed the steps above correctly you will see your menu at the top of your page.