How To... Create a Basic Menu

Build navigation menus with the LIST tag.

1. Construct the LIST tag.

Create a new snippet and write a LIST tag. The minimum attributes required depend on whether the list will be dynamically or manually built. For a dynamic list, you will need to specify; src, allow and itemtemplate. For a manual list, the only attribute needed is the itemtemplate.

Often you may also want to declare the type of list if it is to be one of the standard html list types; ul, ol, dl and also declare a class or id for the list element.

This code below will render a dynamic unordered list (in which case the component should have the 'noteditable' attribute set to "yes") that picks up the 'main_nav' class selector from the css. By using '_self' as the src, it will display all subpages of the page it is applied to and will use the 'listitem' snippet to render the items of this list.

1. %LIST%(
   type=ul,
   src=_self,
   allow=subpage,
   class=main_nav,
   itemtemplate=listitem)%
   

RENDERED OUTPUT

<ul class="main_nav">
	<li>.......</li>
	<li>.......</li>
	etc...
</ul>

The actual quantity of items in this list will be dependent on the amount of child pages of the page that holds this list, and the format of the list item code will be specified by the 'listitem' snippet.

Here is the same type of list built using a manual list (revert the 'noteditable' attribute in the component back to "no"):

1. %LIST%(
   type=ul,
   class=main_nav,
   itemtemplate=listitem)%
   

2. Create the itemtemplate snippet.

The exact format of this will be specific to your own requirements, in this example the itemtemplate is built around a link, and a label.

1. <li><a href="%LINK%">%TITLE%</a> / </li>    

RENDERED OUTPUT

<li><a href="a_page.html">Page Title</a></li>