Is there a way to add Sidebar navigation into an article

Hi Mary, 

Yes, you could add some kind of sidebar navigation by customizing your Guide theme. 

Hi Mary,

You can add sidebar navigation to your help center using our Zendesk extension:

There is one more extension - Table of Contents:

Alternatively, you can get Lotus One theme for Zendesk that includes side navigation and other additional features by default. 

Mary, if you have any questions, contact us. We'll be happy to help.

Best,

Lotus Themes

You showed me side bar navigation in the Guide theme.  I asked about sidebar navigation in an article.  Sometimes we create large articles that need navigation help b/c there are many sections.  We tried the bookmark approach but does not work very well. 

We would like this type of navigation within an article: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

I've experimented by copying and pasting some of the HTML code from this site to use in the source code of the article and could not get anything to work.

Do you have an example of an article where it shows this type of navigation.  Would like to show our team and ask if we can do something similar.

Also,  wanted to know if we add tables to articles and want all tables to follow a consistent color/border/background, is that possible also? and, How?  do you have an example?

@Mary Paez did you ever find a solution to this? I am hoping to do the same thing.

I had my html formatted for a table of contents that remains on the left of the screen as a user reads the document, but it did not render correctly on zendesk. I switched it back to a macro TOC (asciidoc) for the moment.

Some of our documentation is very long (30+ page PDFs) and a side-nav feels indispensable. 

No. I do not have a solution yet.

We have a brand in our HelpDesk that shows a sidebar with the sections on article pages, as shown below. So it's not a full table of contents, but does provide navigation to sections.

I can share the code, but I didn't write the code, and I don't know who wrote the code. You might be able to work with it to also list the articles under the sections.

This is in script.js inside the document.ready function:

// get id and template name
var _location = window.location.href.split('/en-us/');
console.log('window.location.href: ' + window.location.href + ', _location: ');
console.log(_location);
if (_location.length > 1) {
  var _split = _location[1].split('-')[0];
  var _templatename = _split.split('/')[0];
  var _templateid = _split.split('/')[1];
}

var categoriesList = function(_categories) {
  if(typeof HelpCenter.user.locale == 'undefined') {
    HelpCenter.user.locale = window.location.pathname.replace('/', '').replace('?','/').split('/')[1];
  }

  $.ajax({
    url: '/api/v2/help_center/'+HelpCenter.user.locale+'/categories.json',
    type: 'GET',
    dataType: 'json',
    success: _categories
  });
};

var _list = '';

$(document).ajaxStart(function(){
  $('#loader').show();
});
$(document).ajaxStop(function(){
  $('#loader').hide();
});

categoriesList(function(data){
  $(data.categories).each(function (idx, itm) {
    if (itm.name !== 'General') {
      _list = _list + '<li><a href="' + itm.html_url + '" id="' + itm.id + '">' + itm.name + '</a></li>'
    } 
  });
  $('.left-side-category-list').html(_list);
  $('.left-side-category-list a#' +_templateid).addClass('active');

  if(_templatename=='sections' || _templatename=='articles') {
    var categoryid = $('.breadcrumbs > li:nth-child(2) > a').attr('href').split('/categories/')[1].split('-')[0];
    $('.left-side-category-list a#' + categoryid).addClass('active');
  }

});

This is in article_page.hbs:

 <section class="wrapper-column">
  <div class="container">
    <div class="left-col">
      <!-- Page Left Sub Navigation Links -->
      <ul class="left-side-category-list article-list list-mains">
      </ul>
    </div>
  <div class="right-col">

   [article HTML]

  </div>
</section>

This is in style.css:

.left-side-category-list li a.active {
background-color: #e1253b;
}

.wrapper-column .left-col > ul > li > a:hover, 
.left-side-category-list li a.active {
background-color: #e1253b;
}

.wrapper-column .left-col {
float: left;
padding-right: 15px;
width: 33.667%;
}

.wrapper-column .right-col {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 66.333%;
}

.wrapper-column .left-col > ul > li {
background-color: #f0f0f0;
margin-bottom: 3px;
}

.wrapper-column .left-col > ul > li > a {
color: #2d2d2d;
display: block;
font-size: 1.2em;
font-weight: 400;
padding: 10px 35px;
text-transform: uppercase;
width: 100%;
}

.wrapper-column .left-col > ul > li.active a
{
background-color:#e1253b;
color:#fff;
}

.wrapper-column .left-col > ul > li > a:hover, .left-side-category-list li a.active {
color:#fff;
}

Hope this helps.

Thanks! I will try to play with this code next week. 

Hello Lisa - how did it go? Any progress?

I didn't get a chance to check it as I have moved on to a different project. Thank you for your help though! 

Hello, All

I was curious as to how the code snippets provided above for side navigation could be added to an existing theme? Any assistance would be great.