Sections

Content

Layout

Navigation

Table of contents

Commonly used on the Article page, this pattern provides an overview of the structure of the page and links to each section.

Examples

All examples on this page are generated using our Table of Contents plugin and an anchor element of <div id="table-of-contents></div>. When used on the Article page the anchor element can be inserted above or below the content in the article-page.hbs template:

<section class="content" itemprop="articleBody">
  <div data-element="table-of-contents"></div>
  {{article.body}}
</section>

Or within the content, by Guide content creators.

Ordered list 
  • <div data-element="table-of-contents" data-template="table-of-contents"></div>

<script type="text/html" id="tmpl-table-of-contents">
  <% if (items.length) { %>
    <h4>
      In this article
    </h4>
    <ol>
      <% items.forEach(function(item) { %>
        <li class="list-item">
          <a class="inline-block px-2 hover:no-underline" href="<%= item.html_url %>">
            <%= item.name %>
          </a>
        </li>
      <% }); %>
    </ol>
  <% } %>
</script>