# 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**

![](/files/-ME7Y_W9EoLJU_XJ7Cmk)

#### How to make t**able of contents on the full-width**

{% embed url="<https://drive.google.com/file/d/100Vh6ViK0LDg0_pgwdiIBvIIDFcFZ5Ru/view?usp=sharing>" %}

### **Table of Contents on the side with animation**

![](/files/-ME7fGcnEzu1d6jbnxPw)

{% tabs %}
{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}

{% tab title="CSS" %}

```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);
    }
  }
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Replace style id \`**stk-theme\_00000**\` with yours before adding it to your Style Manager. For more info, please go to the [Introduction](/components-library/getting-started/introduction.md) page.

You can also adjust shape and color in the component CSS.
{% endhint %}

## **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](https://setka.io/guide-to-designing-a-great-content-experience/#structure) each new page to see what’s relevant to them, a table of contents provides a quick resource to help those scanners out.&#x20;

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.

{% hint style="success" %}

### 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.&#x20;
* Keep the titles in your table of contents short and sweet, and make sure they all follow the same structure.&#x20;
* [Make your table of contents sticky](https://setka.io/blog/keep-important-content-elements-in-sight-with-new-sticky-animations/) (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.
  {% endhint %}

{% hint style="danger" %}

### 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.&#x20;
* 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!
  {% endhint %}

## **Learn More**

[**Improving Content Comprehension With Layouts**](https://setka.io/blog/designing_effective_layouts)\
\&#xNAN;*Setka*

[**Anchors OK? Re-Assessing In-Page Links**](https://www.nngroup.com/articles/in-page-links/)\
\&#xNAN;*Nielsen Norman Group*

## **Extra Inspiration**

![](/files/-MG7qLzYT0FHalorslE1)

![](/files/-MG7taR-ChnIVPAQdhBW)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://setka.gitbook.io/components-library/organizing-content/table-of-contents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.