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

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