Tutorial: A very basic website - Add a dynamic menu

Tutorial: A very basic website - Add a dynamic menu

Almost every website needs a menu so visitors can easily navigate from one page to another. 

In this part you're going to create a basic template for the Navigator module and add the menu to your page template.

Steps

Open Design Manager (Layout → Design Manager). On the Templates tab click the Create a new Template link.

In the Template Type field choose: Navigator::Navigation.
In the Name field type: Basic demo - menu.
The code in the Template Content field should be replaced by:

<ul>
 {foreach $nodes as $node}
 <li><a href="{$node->url}">{$node->menutext}</a></li>
 {/foreach}
</ul>

On the Designs tab make sure the Basic demo design is selected.
On the Advanced tab → Default select Yes.
Submit the template.

On the Templates tab click the Basic demo - 1 page template.

Replace the code in the Template Content field:

<!doctype html>
<html>
<head>
  <title>{sitename} :: {title}</title>
  <meta name="description" content="{description}">
</head>
<body>
  {Navigator}
  <h1>{title}</h1>
  {content}
  <hr>
  {content_image block='image1'}
  <hr>
  {content block='content2' label='Second content block'}
</body>
</html>

Submit the template.

Refresh the home page of your website (front end). Verify that a link exists for Page 1.

You can now create a second content page. When you're finished refresh the home page again and there should be two links, one for each page.

Summary

You have now created a very simple, though limited navigation template. It will only work for one level hierarchies of content pages. 

You probably want to learn about the more advanced options of the Navigator module. Some resources to check are the available help of the module (Site Admin → Module Manager → Navigator → Help) and the sample Navigator::Navigation templates in Design Manager

Visuals

More info

Next

Next page: Tutorial: A very basic website - Create a stylesheet

Tutorial contents