Skip to content
Communications EO Resources

Table of Contents

The Table of Contents Component provides navigation for long-form content, helping users quickly jump to specific sections of a page. Enhances user experience by making lengthy pages easier to navigate and scan.

Key Features

Section titled “Key Features”

Sticky Positioning

Stays visible as users scroll down long pages. Automatically falls back to static positioning on mobile via a responsive media query.

Hierarchical Support

Nested subsections with padding-left: 24px indentation clearly convey page structure at a glance.

4 Color Themes

Default (white), Navy, Light Blue, and Gold Accent variants match any page context or department branding.

Accessible Markup

Semantic <nav> with aria-label, <h2> heading, and <ul> list structure for full screen reader and keyboard support.

Variants Overview

Section titled “Variants Overview”
VariantBackgroundBorderBest Used For
DefaultWhite #ffffffLight Blue #54c8ebGeneral long-form pages
NavyNavy #003366Light Blue #54c8ebPages using dark hero or navy sections
Light BlueLight Blue tint #e8f7fcNavy #003366Information, resource, or enrollment pages
Gold AccentCream #fef9f0Gold #f0ad4eAnnouncements, event pages, spotlights
HierarchicalWhite #ffffffLight Blue #54c8ebComplex pages with nested subsections
Compact (On This Page)Light Blue tint #e8f7fcLight Blue #54c8ebShorter pages; non-sticky inline use

Copy-Paste Code

Section titled “Copy-Paste Code”
<!-- DEFAULT TABLE OF CONTENTS (WHITE BACKGROUND, STICKY) -->
<style>
nav[aria-label="Table of Contents"] a:hover {
    background-color: #e8f7fc;
    border-left-color: #54c8eb;
}


nav[aria-label="Table of Contents"] a:focus {
    outline: 2px solid #54c8eb;
    outline-offset: 2px;
}


nav[aria-label="Table of Contents"] a:active {
    background-color: #54c8eb;
    color: #ffffff;
    border-left-color: #54c8eb;
}


@media (max-width: 768px) {
    nav[aria-label="Table of Contents"] {
        position: relative !important;
        top: auto !important;
    }
}
</style>
<nav aria-label="Table of Contents" style="position: sticky; top: 12px; background-color: #ffffff; border: 1px solid #54c8eb; border-radius: 6px; padding: 12px 14px; margin: 12px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.08); max-width: 100%;">
    <h2 style="margin: 0 0 10px 0; font-size: 15px; font-weight: 700; color: #003366; border-bottom: 2px solid #54c8eb; padding-bottom: 6px;">Table of Contents</h2>
    <ul style="list-style: none; margin: 0; padding: 0;">
        <li style="margin: 0; padding: 0;">
            <a href="#section-1" style="display: block; color: #003366; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Introduction</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-2" style="display: block; color: #003366; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Getting Started</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-3" style="display: block; color: #003366; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Key Information</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-4" style="display: block; color: #003366; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Contact &amp; Resources</a>
        </li>
    </ul>
</nav>
Section titled “Anchor Link Setup”

The TOC is only functional when each href points to a matching id on a heading in your page content. Add id attributes to your section headings after pasting the TOC.

<!-- In your TOC -->
<a href="#introduction">Introduction</a>


<!-- In your page content -->
<h2 id="introduction">Introduction</h2>
<p>Your introduction content here...</p>


<!-- Another section -->
<h2 id="getting-started">Getting Started</h2>
<p>Your getting started content here...</p>

Indentation Levels for Hierarchical Items

Section titled “Indentation Levels for Hierarchical Items”
Levelpadding-left ValueExample
Top-level item8px (default)1. Introduction
Level 2 subsection24px1.1 Prerequisites
Level 3 subsection40px1.1.1 Details

Customization Guide

Section titled “Customization Guide”

  1. Change the heading text — Update the text inside the <h2> tag. Common alternatives: "Contents", "On This Page", "In This Guide".

  2. Add a link item — Copy an existing <li>...</li> block, paste it after the last <li>, and update the href and link text.

  3. Remove a link item — Delete the entire <li>...</li> block for any section you don’t need.

  4. Update anchor links — Change href="#section-1" on each <a> to match the id attribute on the corresponding section heading in your page (e.g., href="#enrollment-dates").

  5. Add nested subsections — Copy a top-level <li> and add padding-left: 24px; to the <a> style. Use a numbered label like 2.1 Prerequisites for clarity.

  6. Remove sticky behavior — Delete position: sticky; top: 12px; from the <nav> style attribute. The TOC will render inline with the page flow.

  7. Change the accent color — Replace the border and hover color values in the <style> block and on the <h2> border-bottom. Use the PUSD Brand Colors table below for available values.

  8. Adjust spacing — Modify padding on the <nav> (e.g., 16px 20px for more space) and padding on <a> elements (e.g., 8px 10px) for tighter or looser link rows.

PUSD Brand Colors Reference

Section titled “PUSD Brand Colors Reference”
ThemeBackgroundBorderHeading border-bottomLink Color
Default#ffffff#54c8eb#54c8eb#003366
Navy#003366#54c8eb#54c8eb#ffffff
Light Blue#e8f7fc#003366#003366#003366
Gold Accent#fef9f0#f0ad4e#f0ad4e#003366
Compact#e8f7fc#54c8eb#54c8eb#003366

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”