ThemeBuilder for Confluence Server and DC

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.

add hor 01

Instructions

  1. Go to ThemeBuilder.

  2. Click Edit Skins in the Confluence Administration section.

  3. Create a new custom panel called menu.

    add hor 02
  4. In the Header panel, after all other code, add the Include Panel macro to import the new menu panel.

    add hor 03

    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.