The menu is quite simple to output. In this example we will rely on automatic rendering which outputs the menu as an <ul> containing <li> elements. Class names for first, last, active, current and subs are added to indicate the state of the menu item. The class name "subs" indicates that the menu item has child nodes.
The main menu is the most simple type of menu possible. It uses entryLevel zero as starting point - this corresponds to the TypoScript MENU parameter entryLevel, so we are rendering all topmost-level pages as list items.
The submenu is rendered from entryLevel 1. Below the menu we render the page content with colPos 1 - if a backend layout is used it must include an area with this column number. As a special feature, "content sliding" has been enabled and inheritance set to -1, which means that any content element you place on a parent page anywhere in the rootline is inherited to the page currently being rendered (i.e. if you place a HELLO WORLD text element on the top page you will see it rendered on any subpage using this template).
This next example shows how you can manually loop through the pages in the menu - you can do this if you need more control over the output or to create recursive menus (rendering submenu items, and submenu items of submenu items and so on).
The Fluid template variable {menu} is automatically added and contains all pages. In addition you have the variable {rootLine} available - it contains the rootline from the current page and upwards.