Adding pages to the menu is done via the Structure > Menu control panel. Simply drag the desired page from the page list on the left to the place you want it displayed in the menu list on the right. You can also drag items within the menu list to change the order in which they are displayed.
For each menu, you can choose which pages to include, as well as what label to use. You can nest menus arbitrarily deeply, though we recommend no more than two or at most three levels.
Our standard templates and snippets, which are installed when you create a new site, include a snippet called
header that creates the main menu as a horizontal bar and a few additional links in the top right. When you make changes in the Menu section of the Page Index, they"re automatically reflected in the menu displayed by this code.
Should you want to replace our header snippet or approach navigation differently, you can create your own WebvantaScript to access the menu items. The basic code for accessing a list of menu items is as follows:
<w:menu> <ul> <w:each> <li><a href="<w:url />"><w:label /></a></li> </w:each> </ul> </w:menu>
You can easily add a CSS class ("current" in this example) to the menu item whose URL matches the currently displayed page:
<w:menu> <ul> <w:each> <li><a href="<w:url />" <w:if_selected>class="current" </w:if_selected>><w:label /></a></li> </w:each> </ul> </w:menu>
Here's a version that supports a two-level menu with nested lists:
<w:menu> <ul> <w:each> <li><a href="<w:url />" <w:if_selected>class="current"</w:if_selected>><w:label /></a></li> <w:if_submenu> <w:submenu> <ul> <w:each> <li><a href="<w:url />"><w:label /></a></li> </w:each> </ul> </w:submenu> </w:if_submenu> </w:each> </ul> </w:menu>