ThemeBuilder for Confluence Server and DC

Add a 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 area.

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