Creating Navigation

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.

Generating HTML for Navigation

The code in our standard header snippet my be all you need to display your menu. It supports two level of menus, typically a horizontal menu bar with drop-downs. The HTML is a simple, nested unordered list. The visual appearance and behavior of the menu is determined by the CSS and JavaScript on your site. Our standard site template includes a CSS-based drop-down menu (supporting two levels of menu hierarchy), and a little bit of JavaScript to force Internet Explorer into submission.

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>

With different CSS or JavaScript treatments, you can style this as a drop-down menu, dual rows of tabs, a vertical list with flyouts, or nearly anything else you can imagine.

If you need additional markup in the menu, just add it to the code above. For example, many JavaScript and CSS menu libraries require that you apply certain classes or IDs to the menu elements, and you may want to wrap the navigation in a div with an ID.