Horizontal Menu

How to Add a Menu Panel in ThemeBuilder

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

Instructions

1. Go to ThemeBuilder.

2. Click Edit Skins in the Confluence Administration section.

3. Create a new custom panel called menu.

   

4. After all, other code in the Header panel, 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>

5. 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>

6. 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 shown in the image for step 3.