This page last changed on Aug 06, 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 on the left of this page, and in other documentation spaces such as the Crowd documentation.
 | Information for people using Confluence 2.8 or earlier
The instructions below will work for Confluence 2.9 and later only. For earlier versions, please see the navigation panel on the left of this page or go to the documentation home page, select the documentation space for your version under 'All Versions' and then find the page called 'Adding a Navigation Sidebar' within that space. |
Follow the instructions below to add the navigation sidebar to your Confluence space.
 | Permissions required
To customise a space layout as described below, you must be a Space Administrator in the given space and you must be a System Administrator on the Confluence site. |
Step 1. Create the TreeNavigation Page
First, you will create a Confluence page containing the pagetree macro. This is just a normal Confluence page. The only slight oddity is that it should reside at the root of your space, instead of under the space's home page.
Follow these instructions:
-
Go to the 'Space Pages' view for the current space. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Pages'. The 'Space Pages' view will open.
You are now at the 'root' level of your space. The 'root' level contains pages that are added above the space's home page, not as children of the home page.
- At the root level of the space, create a page named 'TreeNavigation'.
- On the page, insert the following text:
- Now decide if you want to add extra functionality to your page tree. By default, using the code above, the page tree will use the home page of the space as its root. You can choose to:
- Specify a different root for your page tree.
- Add a search box at the top of the tree.
- Allow the viewers to expand and collapse the whole tree.
- Control other aspects of the display.
For more information, read about the Pagetree macro.
Step 2. Change the Page Layout on your Space
Now you will change the page layout on your space, to include the above page on the left of every web page displayed.
-
Go to the 'Space Admin' tab of the Browse Space view. To do this:
- Go to a page in the space, open the 'Browse' menu and select 'Space Admin'. The 'Space Administration' view will open.
'Space Admin' is only displayed if you are a space administrator.
- Make sure the Confluence Default theme is selected from the 'Themes' menu.
- Click 'Layout' under the 'Look and Feel' section.
'Layout' is only displayed if you are a Confluence Site Administrator.
- Click 'Create Custom' under the 'Page Layout' section.
- In the layout, find this code:
<div class="wiki-content">
$body
</div>
- Replace the above code block 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 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
- If you want to, you can change the table title in the above code from 'Table of Contents' to something else. For example, it might say 'Confluence Documentation'.
- Save the updated layout.
RELATED TOPICS
Customising Layouts
Upgrading Custom Layouts
Customising the Left Navigation Theme
|