Creating menu templates
You can create templates for Drupal menus using the Layout builder and the Style builder. The steps below describe how to create a simple single level menu template and apply it within a Content or Master template. You should start by using this guide but if your 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
- Navigate to DX8 > Templates > Menu templates
- Click +Add menu template
- 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 an Unordered list with a link inside the list item.
- Click the +plus icon on the Layout canvas to open the Sidebar browser
- Drag a Menu list container element onto the Layout canvas. This is a <ul> element.
- Drag a Menu list item element into the Menu list container on the Layout canvas. This is an <li> element
- Drag a Menu link element into the Menu list item on the Layout canvas. This is an <a> element.
Step 3 - Configure the Menu list container element
- Double click on the List container element to edit its settings
- Within the List container element you can select a List style for your menu but for now you can leave this set to None and your menu will use your Base unordered list style. For more information, see Creating styles for menus
- Click Apply.
Step 4 - Configure the Menu list item element
- Double click on the List item element to edit it's settings
- Within the List item element leave the Range field blank
- In the Child list visibility, select Initially visible
- Leave list item style blank
- Click Apply.
Step 5 - Configure the Menu link element
- Double click on the Menu link element to edit it's settings
- Within the Interaction field, select Click through to link
- Clcik Apply.
Add a menu to a Content template
These steps assume that you have already created Master templates and Content templates for Content types and used them for creating website pages. It also assumes that you have created a Drupal menu to use on your website. If not, you should create one before continuing with these steps.
Step 1 - Add the Menu element to a Master template or Content template
- Navigate to DX8 > Templates > Master template
- Select a Master template you have used to create pages and click Edit
- Click on the +plus icon to open the Sidebar browser
- 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
- Double click on the Menu element to configure its settings
- Within the Menu field, select your Drupal menu
- If you only want the menu to display the active trail, toggle on Only render active trail
- If you want the menu to start at a specific level of your Drupal menu, enter a number in the Start at level x in active trail. Leave blank (or 1) for level 1, enter 2 for level 2 etc
- Within the Template field, select your menu template
- Click Apply.
Step 3 - Save your template and view a page
- Click Save and continue at the bottom of your content template
- Navigate to a page which uses the content template
- If you have followed the steps above correctly you will see your menu at the top of your page.