import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.Block;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.RenderSupport;
import org.apache.tapestry5.annotations.AfterRender;
import org.apache.tapestry5.annotations.BeforeRenderBody;
import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary;
import org.apache.tapestry5.annotations.IncludeStylesheet;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.ioc.annotations.Inject;

public class MenuHolder {
        private static String MENU_CONTAINER = "menu-container-";
    private ComponentResources resources;
    private RenderSupport renderSupport;
    @Parameter(name = "id", defaultPrefix = BindingConstants.LITERAL, required = true)
    private String id;
    public String getMenuID() {
        return MENU_CONTAINER + id;
        public void AfterRender(MarkupWriter writer) {
                String divName = getMenuID();
        renderSupport.addScript(String.format("Menu.init('%s', {'orientation': Menu.HORIZONTAL, 'hidePause': 0.1});", divName));
        public Object RenderMenuItems(MarkupWriter writer) {
                // here search and append to the existing root menu the menu items defined in the child pages   
                ComponentResources parentResources = resources.getContainerResources();
        Block toRender = null;
        while (parentResources != null) {
            Block temp = parentResources.findBlock(id);
            if (temp != null) {
                toRender = temp;
            parentResources = parentResources.getContainerResources();
        return toRender;

<ul> <li/> </ul> structure is required by menu.js. Check to

We create a container div tag with a <ul/> menu items holder. The submenu hierarchy will be placed at the <t:body/> element. It should be nested <li/> <ul/> structure with <a/> for the action for the menu actions

<t:container xmlns:t="" xmlns:p="tapestry:parameter">
        <style type="text/css">
                /*override/change the css if you want*/
                .menu a.selected  { color: #0079c0; background: red;}
        <div class="menuBar">
                <ul class="menu" id="${menuID}">

Tapestry5LayoutWithMenuMenuHolder (last edited 2009-10-20 18:10:31 by outbound)