Sections

Content

Layout

Navigation

Vertical navigation

Present links to categories, sections, articles or other content anywhere in your Help Center.

In this article

Standard

Bold when active 
  • <div class="row">
  <div class="col sidebar max-w-12 p-4 bg-white border-right" data-element="section-list" data-template="section-list" data-template-data='{ "activeSection": {{section.id}} }'></div>
  <div class="col">
    <!-- Place content here -->
  </div>
</div>

<script type="text/html" id="tmpl-section-list">
  <% if (sections.length) { %>
    <ul class="nav navbar-light flex-column">
      <% sections.forEach(function(section) { %>
        <% var isActive = activeSection === section.id; %>
        <li class="nav-item" id="<%= section.id %>">
          <a class="nav-link<% if (isActive) { %> font-bold<% } %>" href="<%= section.html_url %>">
            <%= section.name %>
          </a>
        </li>
      <% }); %>
    </ul>
  <% } %>
</script>

Use .text-primary to apply the primary color to active items.

Background highlight

Use .bg-primary and .text-primary-inverse on active items for a pill-style navigation.

Use border and margin utilities to display the border on the opposite side.

The above example uses a custom shade of the primary color, which can be created using the Sass source files available with every theme. For example:

$color-primary-100: #e8f3ff;

// Add the color to the $colors Sass map to create utility variants
$colors: (
  "primary-100": $color-primary-100
);

Cards

Multi-level

Vertical navigation elements can have multiple levels representing categories, sections and/or articles.

The following two examples demonstrate usage of the Section lists plugin on the Section page.

An example of this pattern can be seen in our Rosetta theme.

Using templateData option, you can pass additional data to the template.

Common use cases include passing the active category, section and/or article ID, however it could also include display options like the maximum number of articles to display before presenting a View all articles link (maxArticles: 5 in the example below).

The following example demonstrate usage of the Article lists plugin on the Article page.

An example of this pattern can be seen in our Ada theme.

All examples above can be used anywhere in the Help Center as they are built using our micro-templating system, however the variables passed to the templating function (for example, activeCategory, activeSection and activeArticle) should be set accordingly.