Adding a Navigation Sidebar

Confluence pages can be set to include a left-hand navigation sidebar (table of contents). There are two ways of implementing this functionality in Confluence:

Using the Documentation Theme — This theme provides the left-hand navigation sidebar that you see in this documentation. The documentation theme is a plugin which can be installed directly via the Administration Console. For more information on installing plugins in Confluence, please refer to Installing Plugins and Macros. The documentation theme plugin is also available for download from our plugins site.
Using Custom Layouts — This is an alternative method (documented below) which is more complex to set up than the documentation theme and requires more maintenance with Confluence major release upgrades.

Custom layout customisations must be re-applied each time you upgrade Confluence

When you upgrade to a new major Confluence version (e.g. from Confluence 2.9.x to Confluence 2.10.x or from Confluence 3.0.x to Confluence 3.1.x), you will need to re-apply this custom layout customisation. See instructions below.

Using Custom Layouts to Implement a Navigation Sidebar

You can see an online example of this theme in our older documentation archives (which can be reached from our Applications and Tools Documentation Directory). Compare this Documentation Theme to the navigation sidebar based on Custom Layouts in our Confluence 3.0 and earlier documentation archives, which can be accessed from the Confluence Documentation Directory.

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:
```
{pagetree}
```
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 for that space or you are a Confluence system 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, locate the 'VIEW' section, and 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">Table of Contents</div>
<div class="spacetree">
#includePage($helper.spaceKey "TreeNavigation")
</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.

Re-Applying the Customisation on Upgrade

When you upgrade to a new major Confluence version (e.g. from Confluence 2.9.x to Confluence 2.10.x or from Confluence 3.0.x to Confluence 3.1.x), you will need to re-apply this customisation.

Reason:
The new Confluence version may contain updates to the page layouts. Because you have customised the page layouts, Confluence will not overwrite your customisation. So your space will not get the latest updates until you set the layout to default and then re-apply your changes.

Here's how to do it:

First make a copy of your customised code, if you have changed it from the code above:
- Go to 'Space Admin, click 'Layout' and edit the customised page layout (as created above).
- Copy the section of code that inserts the customised left-hand navigation panel.
- Close the page layout.
Click 'Reset Default' next to 'Page Layout', to set the page layout back to default. This will bring in the new code for the upgraded version of Confluence.
Create a custom page layout as described in step 2 above, and reinsert the custom left-hand navigation code.
Save the updated layout.

The 'All Versions' section in the navigation bar
A number of people have asked how we created the 'All Versions' section at the top of our navigation side bar. Take a look at Adding an All Versions Section to your Navigation Bar.

All Versions

Confluence 3.1 Documentation

Adding a Navigation Sidebar

Using Custom Layouts to Implement a Navigation Sidebar

Step 1. Create the TreeNavigation Page

Step 2. Change the Page Layout on your Space

Re-Applying the Customisation on Upgrade

RELATED TOPICS

Labels

Children (1)

Comments (75)

patrick dinneen says:

Giles Gaskell [Atlassian Technical Writer] says:

Anonymous says:

Anonymous says:

Azwandi Mohd Aris [Atlassian] says:

Anonymous says:

Azwandi Mohd Aris [Atlassian] says:

Anonymous says:

Azwandi Mohd Aris [Atlassian] says:

Anonymous says:

Anonymous says:

Anja Gruss says:

Zed Yap [Atlassian] says:

Anja Gruss says:

Christian Bering says:

Sarah Maddox [Atlassian Technical Writer] says:

Brian Carr says:

Sarah Maddox [Atlassian Technical Writer] says:

Brian Carr says:

Sarah Maddox [Atlassian Technical Writer] says:

Brian Carr says:

Anonymous says:

Anonymous says:

Pedro Martello says:

Jorge Miguel Correia says:

Anonymous says:

Anonymous says:

Anonymous says:

Anonymous says:

Anonymous says:

Zed Yap [Atlassian] says:

Anonymous says:

Azwandi Mohd Aris [Atlassian] says:

Lars Sjögren says:

Arie Murdianto says:

Anonymous says:

Arie Murdianto says:

Rene Kermici says:

Zed Yap [Atlassian] says:

Anonymous says:

Anonymous says:

Arie Murdianto says:

Tim McDougall says:

Sashidaran Jayaraman [Atlassian] says:

Corey Hampton says:

Giles Gaskell [Atlassian Technical Writer] says:

Corey Hampton says:

Diane Sexton says:

Anonymous says:

Zed Yap [Atlassian] says:

Steven Black says:

Corey Hampton says:

Azwandi Mohd Aris [Atlassian] says:

anthony hornby says:

Zed Yap [Atlassian] says:

anthony hornby says:

anthony hornby says:

Jamie says:

Jamie says:

Zed Yap [Atlassian] says:

Jamie says:

anthony hornby says:

Jamie says:

Anonymous says:

Sarah Maddox [Atlassian Technical Writer] says:

Jeff Liu says:

Jack Low [Atlassian] says:

Emily Johnson says:

Mathieu Filotto says: