## Table of Contents

Table of contents and navigation components for document structure.

### Basic Table of Contents

HTML

    <nav class="toc" aria-label="Table of Contents">
                <h4
                    class="toc__title"
                    style="
                        margin: 0 0 12px;
                        font-size: 14px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        opacity: 0.7;
                    "
                >
                    Contents
                </h4>
                <ul
                    class="toc__list"
                    style="list-style: none; margin: 0; padding: 0"
                >
                    <li class="toc__item">
                        <a
                            href="#section-1"
                            class="toc__link active"
                            style="
                                display: block;
                                padding: 8px 12px;
                                text-decoration: none;
                                border-left: 2px solid var(--color_fill_primary);
                                background: var(--color_fill_secondary);
                                border-radius: 0 4px 4px 0;
                            "
                        >
                            Introduction
                        </a>
                    </li>
                    <li class="toc__item">
                        <a
                            href="#section-2"
                            class="toc__link"
                            style="
                                display: block;
                                padding: 8px 12px;
                                text-decoration: none;
                                border-left: 2px solid transparent;
                            "
                        >
                            Getting Started
                        </a>
                    </li>
                    <li class="toc__item">
                        <a
                            href="#section-3"
                            class="toc__link"
                            style="
                                display: block;
                                padding: 8px 12px;
                                text-decoration: none;
                                border-left: 2px solid transparent;
                            "
                        >
                            Installation
                        </a>
                    </li>
                    <li class="toc__item">
                        <a
                            href="#section-4"
                            class="toc__link"
                            style="
                                display: block;
                                padding: 8px 12px;
                                text-decoration: none;
                                border-left: 2px solid transparent;
                            "
                        >
                            Configuration
                        </a>
                    </li>
                    <li class="toc__item">
                        <a
                            href="#section-5"
                            class="toc__link"
                            style="
                                display: block;
                                padding: 8px 12px;
                                text-decoration: none;
                                border-left: 2px solid transparent;
                            "
                        >
                            Usage Examples
                        </a>
                    </li>
                </ul>
            </nav>

### Nested Table of Contents

HTML

    <nav class="toc toc--nested" aria-label="Table of Contents">
                <h4 style="margin: 0 0 16px; font-size: 16px; font-weight: 600">
                    On This Page
                </h4>
                <ul
                    style="
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        font-size: 14px;
                    "
                >
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 0;
                                text-decoration: none;
                                font-weight: 500;
                            "
                        >
                            1. Introduction
                        </a>
                        <ul
                            style="list-style: none; margin: 0; padding-left: 16px"
                        >
                            <li>
                                <a
                                    href="#"
                                    style="
                                        display: block;
                                        padding: 4px 0;
                                        text-decoration: none;
                                        opacity: 0.8;
                                    "
                                >
                                    1.1 Overview
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    style="
                                        display: block;
                                        padding: 4px 0;
                                        text-decoration: none;
                                        opacity: 0.8;
                                    "
                                >
                                    1.2 Prerequisites
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 0;
                                text-decoration: none;
                                font-weight: 500;
                            "
                        >
                            2. Installation
                        </a>
                        <ul
                            style="list-style: none; margin: 0; padding-left: 16px"
                        >
                            <li>
                                <a
                                    href="#"
                                    style="
                                        display: block;
                                        padding: 4px 0;
                                        text-decoration: none;
                                        opacity: 0.8;
                                    "
                                >
                                    2.1 npm
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    style="
                                        display: block;
                                        padding: 4px 0;
                                        text-decoration: none;
                                        opacity: 0.8;
                                    "
                                >
                                    2.2 CDN
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    style="
                                        display: block;
                                        padding: 4px 0;
                                        text-decoration: none;
                                        opacity: 0.8;
                                    "
                                >
                                    2.3 Manual Download
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 0;
                                text-decoration: none;
                                font-weight: 500;
                            "
                        >
                            3. Configuration
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 0;
                                text-decoration: none;
                                font-weight: 500;
                            "
                        >
                            4. API Reference
                        </a>
                    </li>
                </ul>
            </nav>

### Numbered TOC

HTML

    <nav
                class="toc toc--numbered"
                aria-label="Table of Contents"
                style="max-width: 300px"
            >
                <ol
                    style="
                        margin: 0;
                        padding: 0;
                        counter-reset: toc-counter;
                        list-style: none;
                    "
                >
                    <li style="counter-increment: toc-counter">
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: baseline;
                                gap: 8px;
                                padding: 10px 0;
                                text-decoration: none;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            <span
                                style="
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                01
                            </span>
                            <span>Getting Started</span>
                        </a>
                    </li>
                    <li style="counter-increment: toc-counter">
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: baseline;
                                gap: 8px;
                                padding: 10px 0;
                                text-decoration: none;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            <span
                                style="
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                02
                            </span>
                            <span>Core Concepts</span>
                        </a>
                    </li>
                    <li style="counter-increment: toc-counter">
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: baseline;
                                gap: 8px;
                                padding: 10px 0;
                                text-decoration: none;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            <span
                                style="
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                03
                            </span>
                            <span>Components</span>
                        </a>
                    </li>
                    <li style="counter-increment: toc-counter">
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: baseline;
                                gap: 8px;
                                padding: 10px 0;
                                text-decoration: none;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            <span
                                style="
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                04
                            </span>
                            <span>Customization</span>
                        </a>
                    </li>
                    <li style="counter-increment: toc-counter">
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: baseline;
                                gap: 8px;
                                padding: 10px 0;
                                text-decoration: none;
                            "
                        >
                            <span
                                style="
                                    font-weight: 600;
                                    color: var(--color_fill_primary);
                                "
                            >
                                05
                            </span>
                            <span>Advanced Topics</span>
                        </a>
                    </li>
                </ol>
            </nav>

### TOC Card

HTML

    <div
                class="toc-card"
                style="
                    max-width: 400px;
                    padding: 20px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                "
            >
                <div
                    style="
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 16px;
                        padding-bottom: 16px;
                        border-bottom: 1px solid var(--color_line_secondary);
                    "
                >
                    <span style="font-size: 24px">📑</span>
                    <div>
                        <h4 style="margin: 0; font-size: 16px">
                            Table of Contents
                        </h4>
                        <p style="margin: 0; font-size: 13px; opacity: 0.7">
                            5 sections in this guide
                        </p>
                    </div>
                </div>
                <ul style="list-style: none; margin: 0; padding: 0">
                    <li>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px;
                                border-radius: 6px;
                                text-decoration: none;
                                transition: background 0.2s;
                            "
                        >
                            📖 Introduction
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px;
                                border-radius: 6px;
                                text-decoration: none;
                                transition: background 0.2s;
                            "
                        >
                            ⚙️ Setup & Installation
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px;
                                border-radius: 6px;
                                text-decoration: none;
                                transition: background 0.2s;
                            "
                        >
                            🧩 Components Overview
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px;
                                border-radius: 6px;
                                text-decoration: none;
                                transition: background 0.2s;
                            "
                        >
                            🎨 Theming Guide
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 8px;
                                border-radius: 6px;
                                text-decoration: none;
                                transition: background 0.2s;
                            "
                        >
                            ❓ FAQ
                        </a>
                    </li>
                </ul>
            </div>

### Floating/Sticky TOC

HTML

    <aside
                class="toc-floating"
                style="
                    width: 220px;
                    padding: 16px;
                    background: white;
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                "
            >
                <h5
                    style="
                        margin: 0 0 12px;
                        font-size: 12px;
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        opacity: 0.6;
                    "
                >
                    Quick Links
                </h5>
                <ul
                    style="
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        font-size: 13px;
                    "
                >
                    <li>
                        <a
                            href="#"
                            class="active"
                            style="
                                display: block;
                                padding: 6px 10px;
                                margin: 2px 0;
                                text-decoration: none;
                                background: var(--color_fill_primary);
                                color: white;
                                border-radius: 4px;
                            "
                        >
                            Overview
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 10px;
                                margin: 2px 0;
                                text-decoration: none;
                                border-radius: 4px;
                            "
                        >
                            Features
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 10px;
                                margin: 2px 0;
                                text-decoration: none;
                                border-radius: 4px;
                            "
                        >
                            Installation
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 10px;
                                margin: 2px 0;
                                text-decoration: none;
                                border-radius: 4px;
                            "
                        >
                            Examples
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 6px 10px;
                                margin: 2px 0;
                                text-decoration: none;
                                border-radius: 4px;
                            "
                        >
                            API Docs
                        </a>
                    </li>
                </ul>
                <div
                    style="
                        margin-top: 12px;
                        padding-top: 12px;
                        border-top: 1px solid var(--color_line_secondary);
                    "
                >
                    <a
                        href="#top"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 12px;
                            text-decoration: none;
                            opacity: 0.7;
                        "
                    >
                        ↑ Back to top
                    </a>
                </div>
            </aside>

### Compact Inline TOC

HTML

    <div
                class="toc-inline"
                style="
                    padding: 16px;
                    background: var(--color_fill_secondary);
                    border-radius: 8px;
                    border-left: 4px solid var(--color_fill_primary);
                "
            >
                <strong
                    style="
                        font-size: 13px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    "
                >
                    Jump to:
                </strong>
                <span
                    style="
                        display: inline-flex;
                        flex-wrap: wrap;
                        gap: 8px;
                        margin-left: 12px;
                    "
                >
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            padding: 4px 10px;
                            background: white;
                            border-radius: 4px;
                            font-size: 13px;
                        "
                    >
                        Intro
                    </a>
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            padding: 4px 10px;
                            background: white;
                            border-radius: 4px;
                            font-size: 13px;
                        "
                    >
                        Setup
                    </a>
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            padding: 4px 10px;
                            background: white;
                            border-radius: 4px;
                            font-size: 13px;
                        "
                    >
                        Usage
                    </a>
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            padding: 4px 10px;
                            background: white;
                            border-radius: 4px;
                            font-size: 13px;
                        "
                    >
                        Examples
                    </a>
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            padding: 4px 10px;
                            background: white;
                            border-radius: 4px;
                            font-size: 13px;
                        "
                    >
                        FAQ
                    </a>
                </span>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!