This documentation has moved. For the most recent documentation, check out https://docs.adaptavist.com. Please update your bookmarks and links.

Skip to end of metadata
Go to start of metadata

How to Add a Menu Panel in ThemeBuilder


This tutorial will show you how to add a horizontal menu below the header area in Confluence using ThemeBuilder.

Instructions

  1. Go to ThemeBuilder > Edit Skins in the Confluence Administration area.

  2. Create a new custom panel called 'menu'



  3. In the 'header' panel, after all other code, add the 'include panel' macro to import the new 'menu' panel. 



    Code:

    <ac:macro ac:name="panel-import">
    	<ac:parameter ac:name="panel">menu</ac:parameter>
    </ac:macro>



  4. Edit the 'menu' panel and add this code to form the base for your menu: 

    <nav class="aui-navgroup aui-navgroup-horizontal">
    	<div class="aui-navgroup-inner">
    		<div class="aui-navgroup-primary">
    			<ul class="aui-nav">
    				<li>
    					<!-- add your menu items --> 
    				</li> 
    			</ul>
    		</div>
    	</div>
    </nav>
  5. You can use the panel link macro, panel sitehome macro or HTML to add links to internal pages or external sites. Add the links between the HTML <li> tags.

    Example:

    <nav class="aui-navgroup aui-navgroup-horizontal">
    	<div class="aui-navgroup-inner">
    		<div class="aui-navgroup-primary">
    			<ul class="aui-nav">
    				<li>	
    					<ac:macro ac:name="panel-sitehome">
    					<ac:parameter ac:name="target">dashboard</ac:parameter>
    					<ac:rich-text-body>Dashboard</ac:rich-text-body>
    					</ac:macro>
    				</li>
    				<li>
    					<ac:macro ac:name="panel-link">
    					<ac:parameter ac:name="link">SPACEKEY:Page Name</ac:parameter>
    					<ac:rich-text-body>Confluence Page Name</ac:rich-text-body>
    					</ac:macro>
    				</li> 
    				<li>
    					<a href="http://www.adaptavist.com">adaptavist.com</a>
    				</li> 
    			</ul>
    		</div>
    	</div>
    </nav>

This should give you a horizontal link menu that displays just below the page header, as show in the first image above.

Further Information

  • No labels