Share:
ClickHelp Documentation

Sidebar

Topic navigation is important for your readers. In addition to the Table of Contents panel of ClickHelp, you can add a navigation sidebar to your topics.

Thanks to the Master Page feature of ClickHelp, you can configure a standard navigation sidebar for all your topics and put the MiniTOC and See Also dynamic elements into it.

Here is how this sidebar may look like:

To add such sidebar navigation to your existing documentation projects, follow the steps below.

Step 1. Define a few styles

To make the sidebar navigation nicer, let's add the below CSS code to your Project Styles file.

CSS
.sidebar {
position: fixed;
width: 280px;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
background: white;
}
@media (max-width: 979px) {
.sidebar {
display: none;
}
}
.sidebar .CHMiniToc {
padding-left: 0;
list-style-type: none;
}
.sidebar .CHMiniToc::before {
content: "In this topic:";
font-weight: bold;
padding-left: 10px;
}
.sidebar .CHMiniToc li {
padding-left: 20px;
}
.sidebar .CHSeeAlso {
list-style-type: none;
padding-left: 0;
}
.sidebar .CHSeeAlso::before {
content: "Related Topics";
font-weight: bold;
}

Step 2. Create a topic with the sidebar content

In order to edit a sidebar visually in the future, we recommend that you create a separate topic that will play the role of a sidebar - we'll use that topic later.

Open this topic for editing and insert a mini-TOC in order to display the sub-headings and/or the See Also block for related topics.

Step 3. Add the sidebar topic to your project Topic Master Page

Copy the below code to the Clipboard (you will need to change the snippet url to the link of your actual sidebar topic):

HTML
<ch:exclude tags="PrintedDoc">
<ch:nav type="breadcrumb" class="headerBreadcumb" includeSelf="true"/>
<div class="sidebar">
<ch:snippet url="/articles/#!project-my-manual/snippet-sidebar"/>
</div>
</ch:exclude>

Once you update the snippet url, you can add the code to the Topic header HTML field of the Topic Master page settings screen:

This is it - after you complete the above steps, every topic of your project will have that navigation sidebar.

Editing the Sidebar Content

The reason we put the sidebar content into a separate topic was the visual editing. We could definitely add the same MiniTOC and See Also blocks directly to the Topic Master Page settings. But then we would need to edit it in the HTML mode only. But since the content is stored in a topic, we can use the Design mode of the topic editor to make changes to the sidebar content.

In the example below, we've added a video and a picture to the sidebar:

Editing Sidebar Styles

If you need to edit the sidebar visual representation, open your Project Styles file and edit the sidebar styles we added there before. In the example below, we've changed the background color, prefixed the MiniTOC and See Also lists with some text, and also added a shadow to the right-hand panel.

Here is the result: