Adding a Navigation Sidebar

Confluence pages can be set to include a left-hand navigation sidebar (table of contents) as shown below:



You can see an online example in the Crowd documentation Check the left-hand side of this page .

Follow the instructions below to add this sidebar to an individual space or across the entire site.

A. Install the PageTree Plugin

1. Follow the instructions to install the PageTree plugin.

B. Create the SearchNavigation Page

1. Go to the 'Space Pages' view for the current space. To do this:

   • Go to a page in the space, open the 'Space' menu and select 'Pages'. The 'Space Pages' view will open.
2. Click the 'Tree' tab to see a tree view of the pages in your space.
3. At the root level of the space, create a page named 'SearchNavigation'.
   (The 'root' level contains pages that are added above the space's home page, not as children of the home page.)
4. On the page, insert the following text:

   {livesearch:spaceKey=SPACEKEY}
   

   Note - Make sure to replace 'SPACEKEY' in the above code with the appropriate key of the space you wish to search.

C. Create the TreeNavigation Page

1. At the root level of your space, create a page named 'TreeNavigation'.
2. On the page, insert the following text:

   {pagetree}
   

   Note - With the pagetree macro, you can specify the root of the pagetree.
3. Further information on the pagetree macro can be found here.

D. Change the Page Layout on your given Space

1. To do this, you must have Space Administrative rights on the given space and you must be a System Administrator.

2. Go to the 'Space Admin' tab of the Browse Space view. To do this:

   • Go to a page in the space, open the 'Space' menu and select 'Space Admin'. The 'Space Administration' view will open.

   'Space Admin' is only displayed if you are a space administrator.

3. Make sure the Confluence Default theme is selected from the 'Themes' menu.
4. Click 'Layout' under the 'Look and Feel' section.
5. Click 'Create Custom' under the 'Page Layout' section.
6. Replace a section of the layout as described below, then save the updated layout.

Replace this code....
Replace this section of the page layout code...

<div class="wiki-content">
$body
</div>

with this for Confluence 2.5 & earlier

#if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}

</style>
<table>
<tr>
<td valign="top" align="left" width="22%" >
<div class="tabletitle">Space Search</div>
<div class="spacetree">
#includePage($helper.spaceKey "SearchNavigation")
</div>
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
#includePage($helper.spaceKey "TreeNavigation")
</div>
</td>
<td valign="top" align="left" width="78%">
<div class="wiki-content">
<blockquote>
$body
</blockquote>
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
    $body
</div>
#end

...or with this for Confluence 2.6 or greater

#if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}

</style>

<table cellspacing="2" cellpadding="5">
<tr>
<td valign="top" align="left" width="22%" bgcolor="#F9F9F9" class="noprint">
<div class="tabletitle">Space Search</div>
<div class="spacetree">
#includePage($helper.spaceKey "SearchNavigation")
</div>
<div class="tabletitle">Table of Contents</div>
<div class="spacetree">
<span class="smalltext">
#includePage($helper.spaceKey "TreeNavigation")
</span>
</div>
</td>
<td valign="top" align="left" width="78%" class="pagecontent">
<div class="wiki-content">
$body
</div>
</td>
</tr>
</table>
#else
<div class="wiki-content">
    $body
</div>
#end