Creating menu templates

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.

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.

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 element.

Creating menu templates

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.

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.

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 element

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
3. Click Apply.

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.

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.

Add a menu to a template

These steps assume that you have already created a Master template. 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.

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.

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.

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
3. Click Apply.

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.

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.

Add a menu to a template

These steps assume that you have already created a Master template. 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.

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.

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.