This page last changed on Mar 25, 2008 by smaddox.
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.
 | The navigation sidebar requires the PageTree plugin
You will need to use the pagetree macro, which is part of the PageTree plugin. This plugin is not shipped with Confluence, so you will need to install it onto your Confluence instance first. Please note also that the plugin is not currently supported by Atlassian. Read more about supported plugins. |
Follow the instructions below to add this sidebar to an individual space or across the entire site.
A. Install the PageTree Plugin
- Follow the instructions to install the PageTree plugin.
Please note that the PageTree plugin is not currently supported by Atlassian. Read more about supported plugins.
B. Create the SearchNavigation Page
- At the root level of your space, create a page named 'SearchNavigation'.
- 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
- At the root level of your space, create a page named 'TreeNavigation'.
- On the page, insert the following text:
Note - With the pagetree macro, you can specify the root of the pagetree.
- Further information on the pagetree macro can be found here.
D. Change the Page Layout on your given Space
- To do this, you must have Space Administrative rights on the given space.
- Browse the space.
There are two ways to browse a space:
- Click the
icon next to the space name on the Dashboard. The 'Pages' tab of the 'Browse Space' view will open
- Or go to a page in the space and select the option you want from the 'Space' menu. The corresponding tab of the 'Browse Space' view will open.
- Go to the 'Space Admin' tab.
- Make sure the Confluence Default theme is selected from the 'Themes' menu.
- Click 'Layout' under the 'Look and Feel' section.
- Click 'Create Custom' under the 'Page Layout' section.
- 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
with this code...
#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
with this code (2.6 and above)
#if ($action.isPrintableVersion() == false)
<style>
.spacetree * ul{
padding-left:0px;
margin-left: 0px;
}
.spacetree * li{
margin-left: 5px;
padding-left:5px;
}
</style>
<table cellspacing="0" cellspacing="0">
<tr>
<td valign="top" align="left" width="22%" bgcolor="#F9F9F9">
<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
|