Table of Contents

A table of contents outlines what’s going to be included in a piece of content, giving the reader a quick snapshot of what they’ll get out of reading the piece, helping them navigate what otherwise would be an overwhelming amount of content, and making it easier for folks looking for specific information to find it.

Examples

Table of Contents on the full-width

How to make table of contents on the full-width

Table of Contents on the side with animation

HTML

<div data-ce-tag="container" data-container-name="Table of Contents" class="stk-snippets-toc stk-container" data-anim-zoom="100" data-anim-shift="0" data-anim-rotation="0" data-anim-opacity="100" data-anim-direction="right" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90" data-anim-trigger="whenScrolling" data-anim-sticky-direction="top" data-anim-sticky-offset="20" data-anim-name="MAoVd" data-anim-m="true" data-anim="true">
  <div data-ce-tag="container" class="stk-snippets-toc__content stk-container">
    <p class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset">Content</strong></p>
    <hr class="stk-reset stk-theme_00000__separator_divider_1">
    <p class="stk-reset stk-theme_00000__mb_05 align-left">1. <a href="https://setka.io/blog/using-visuals-imagery-to-improve-content-engagement/#stk-1" target="_blank" class="stk-reset">How great visuals can impact engagement</a></p>
    <p class="stk-reset">2. <a href="https://setka.io/blog/using-visuals-imagery-to-improve-content-engagement/#stk-2" target="_blank" class="stk-reset">The basics of effective visuals</a></p>
    <p class="stk-reset">3. <a class="stk-reset" href="https://setka.io/blog/using-visuals-imagery-to-improve-content-engagement/#stk-4" target="_blank">Best practices for integrating visual elements</a></p>
  </div>
</div>

CSS

@media screen and (min-width: 769px) {
    /* ToC open */
    .stk-snippets-toc .stk-snippets-toc__content,
    .stk-snippets-toc[data-anim-played="true"] .stk-snippets-toc__content:hover {
      height: auto;
      margin: 0;
      padding: 30px;
      background: #f3f3f3;
      overflow: auto;
    }
    /* ToC closed */
    .stk-snippets-toc[data-anim-played="true"] .stk-snippets-toc__content {
      position: fixed;
      top: 20px;
      z-index: 10;
      height: 0;
      margin: 0;
      padding: 30px;
      background: url("data:image/svg+xml,%3Csvg height='60' viewBox='0 0 60 60' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='30' cy='30' r='30' fill='%235500ff'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 10px top 0;
      overflow: hidden;
    }
    .stk-grid:not(.ce-element) .stk-snippets-toc[data-anim-played="true"] .stk-snippets-toc__content {
      width: 300px;
      box-sizing: border-box;
    }
    .stk-snippets-toc[data-anim-played="true"] .stk-snippets-toc__content > * {
      transition: opacity 0.25s ease, transform .25s ease;
      opacity: 0 !important;
      transform: translate3d(0px, -10px, 0px);
    }
    .stk-snippets-toc[data-anim-played="true"] .stk-snippets-toc__content:hover > * {
      opacity: 1 !important;
      transform: translate3d(0px, 0px, 0px);
    }
  }

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust shape and color in the component CSS.

Content Experience Impact

Especially for longer content (3,000+ words) or guide-style pieces, including a table of contents is a must because it makes your content easier to understand and improves engagement. For one, it gives the reader a quick outline of what will be covered. Given that 79% of website visitors scan each new page to see what’s relevant to them, a table of contents provides a quick resource to help those scanners out.

It also assists people looking for specific information find what they’re looking for. According to Contently, users only engage an average of 2 minutes with longer documents like ebooks and whitepapers. With a table of contents, you can allow the reader to make the most of that time and leave with the information they need more quickly.

Dos

• Include a table of contents for any article over 3,000 words or that has a guide-style structure where readers may be looking for specific information.

• Use anchor links to allow users to click directly from the table of contents to the section they want to read.

• Use bullet points or numbers to make your table of contents easily scannable.

• Keep the titles in your table of contents short and sweet, and make sure they all follow the same structure.

• Make your table of contents sticky (meaning it stays visible on the screen as a user scrolls down) so they can easily reference it and jump to new sections as they’re reading.

Don'ts

• Don’t feel the need to link to every single sub-section. Think of what will be most helpful to outline for your readers without making your table of contents too cluttered. If you do include sub-sections, make sure there is a visual hierarchy that clearly distinguishes them.

• Don’t discount a table of contents for shorter pieces of contents. If you think it will help a reader more easily navigate your piece, add it in!

Learn More

Improving Content Comprehension With Layouts Setka

Anchors OK? Re-Assessing In-Page Links Nielsen Norman Group

Extra Inspiration