Table of Contents – Design Portal

A table of contents provides links to sections of the same document.

Demo

<nav class="toc toc--sticky">
  <div class="toc__container">
    <h2 class="toc__heading">Table of Contents</h2>
    <button class="toc__toggle" type="button" aria-label="Close Table of Contents">
      <svg class="toc__toggle-icon" xmlns="http://www.w3.org/2000/svg" width="18.584" height="10.292"><path d="M17.17 8.878L9.292 1 1.414 8.878" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
      <svg class="toc__close-icon" xmlns="http://www.w3.org/2000/svg" width="13.969" height="13.787"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path data-name="Path 1" d="M1.596 12.373l10.96-10.96"></path><path data-name="Path 1390" d="M12.372 12.373L1.412 1.413"></path></g></svg>
    </button>
    <ul class="toc__list">
      <li class="toc__item">
        <a class="toc__link" href="">Identify Your Target Beforehand</a>
      </li>
      <li class="toc__item">
        <a class="toc__link" href="">Research Prices and Dealers</a>
      </li>
      <li class="toc__item">
        <a class="toc__link" href="">Buy With Cash</a>
      </li>
      <li class="toc__item">
        <a class="toc__link" href="">Get Pre-Approved for a Car Loan</a>
      </li>
    </ul>
  </div>
</nav>

.toc {
  margin-bottom: 1.25rem;

  &__toggle {
    @extend %button-reset;
    @include display-flex(center, null, null, null, center);
    height: 2rem;
    position: absolute;
    right: .5rem;
    top: .325rem;
    width: 1.75rem;

    &:focus, &:active {
      outline: 1px solid var(--primary);
    }
  }

  &__toggle-icon,
  &__close-icon {
    position: absolute;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
  }

  &__toggle-icon {
    opacity: 1;

    .toc__toggle--active & {
      opacity: 0;
    }
  }

  &__close-icon {
    opacity: 0;

    .toc__toggle--active & {
      opacity: 1;
    }
  }

  &__container {
    max-height: 2.64875rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.35s ease-in-out;

    .toc--active & {
      max-height: 50rem;
    }
  }

  &__list {
    @extend %list-reset;
    opacity: 0;
    pointer-events: none;
    transition: 0.15s ease-in-out;

    .toc--active & {
      opacity: 1;
      pointer-events: all;
    }
  }

  &__item {
    display: flex;
  }

  &__link {
    display: block; 
    transition: color 0.15s ease-in-out;

    &:hover, &:focus {
      color: var(--primary);  
    }
  }
}

@media (max-width: 991px) {
  .toc--sticky {
    position: sticky;
    top: 0.5rem;
    z-index: 2;
    transition: top 0.5s ease-in-out;

    // offset sticky header
    .header--visible + .main & {
      top: 3.95rem;
    }
  }
}

@media (min-width: $lg) {
  .toc {
    align-self: stretch;
    grid-area: toc;
    margin-bottom: 0;
    padding-top: 3rem;

    &__container {
      max-height: none;

      /*container needed for desktop sticky*/
      .toc--sticky & {
        position: sticky;
        top: 1rem;
        z-index: 0;
      }
    }

    &__list {
      opacity: 1;
      pointer-events: all;
    }

    // Added to child theme to avoid important
    // &__toggle {display: none;}
  }
}

/* ==================================================================
	TABLE OF CONTENTS OVERRIDES
================================================================== */

.toc {
  &__container {
    @include card;
    padding: 0.7rem 1rem;
  }

  &__toggle-icon,
  &__close-icon {
    path {
      stroke: var(--accent-2);
    }
  }

  &__heading {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7em;
    position: relative;

    &:after {
      background: var(--primary);
      bottom: 0;
      content: "";
      height: .1875rem;
      left: 0;
      position: absolute;
      width: 2.8125rem;
    }

    &:after {
      opacity: 0;
    }

    .toc--active &:after {
      opacity: 1;
    }
  }

  &__item {
    &:not(:last-child) {
      margin-bottom: 0.75rem;
    }

    &:before {
      border-bottom: .4375rem solid transparent;
      border-left: .5625rem solid var(--primary);
      border-top: .4375rem solid transparent;
      content: "";
      height: 0; 
      margin-right: 0.5rem;
      transform: translateY(.0625rem);
      width: 0;
    }
  }

  &__link {
    color: var(--black);
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;

    &:hover, &:focus, &:active {
      color: var(--primary)
    }

    &--active {
      font-weight: 700;
    }
  }
}

@media (min-width: $lg) {
  .toc {
    &__container {
      padding: 0.8rem 1rem;
    }

    &__toggle {
      display: none;
    }

    &__heading {
      padding-bottom: 0.7em;

      &:after {
        opacity: 1;
      }
    }
  }
}

  function tocFunctionality() {
  // Table of contents functionality
  const toc = document.querySelector('.toc');
  if (toc) {
    //  Toggle functionality
    const tocToggle = document.querySelector('.toc__toggle');
    tocToggle.addEventListener('click', function() {
      this.classList.toggle('toc__toggle--active');
      toc.classList.toggle('toc--active');
    });

    // Clicking on toc link makes it active
    const tocLink = toc.querySelectorAll('.toc__link');
    tocLink.forEach(element => {
      element.addEventListener('click', function() {
        // Remove active class from all links
        tocLink.forEach(link => {
          link.classList.remove('toc__link--active');
        });
        // Add active class to clicked link
        element.classList.toggle('toc__link--active');
        toc.classList.toggle('toc--active');
        
      });
    });
  }
} tocFunctionality();

Note

The sticky functionality is a native CSS feature.
When a table of contents link is clicked, it anchors down to the respective heading.

States & Variations

Mobile - Contracted

On mobile, the table of contents is contracted, and a toggle appears.

Mobile - Expanded

On mobile, the table of contents is expanded when the toggle is clicked.

Sticky

By default, the table of contents is sticky on mobile and desktop. A CSS class of toc--sticky is added to the parent element which makes it sticky.

<nav class="toc toc--sticky">
  <div class="toc__container">
  ...
  </div>
</nav>

Usage

Table of contents are a default component for all unified single flow templates. It can be enabled/disabled via the unified themes visibility options, at the post level.

Anatomy

Table of Contents / Container
Table of Contents Heading
Table of Contents Item / Link
Table of Contents Toggle