ThemeBuilder for Confluence Data Center - Horizontal Menu

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

Instructions

Go to ThemeBuilder.
Click Edit Skins in the Confluence Administration section.
Create a new custom panel called menu.
After all, other code in the Header panel, add the Include Panel macro to import the new menu panel.
Code:
1
2
3
<ac:macro ac:name="panel-import"> <ac:parameter ac:name="panel">menu</ac:parameter> </ac:macro>

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>

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.