Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Table of Contents

    The table of contents component allows users to quickly navigate through long pages by providing jump links to different sections of the content within a single page.

    Overview

    The Table of Contents (ToC) component renders as a left navigation that includes anchor links to various locations on the page. The links themselves can either be dynamically generated based on anchor links and associated title attributes or manually entered by the author.

    Table of contents component

    When to Use

    • When the page length is long and requires a lot of scrolling.
    • When users need to know what is included in a page, the table of contents can serve as an outline or summary of the page content.
    • When users need to navigate to a specific section on the page quickly.

    When Not to Use

    • When there is only one section, there is no need to include the ToC
    • When a page is relatively short and the user will not have to scroll very far.
    • When users need to read all the content in a specific order.

    Behaviors

    Sticky Behavior

    The Table of contents is sticky to provide context to the user about where they are within a given page.

    Desktop

    On desktop, the optional menu appears in the left column of the main content area and remains sticky while scrolling the page.

    Smaller Breakpoints

    The Table of contents changes to a dropdown on Small and X-Small breakpoints. The dropdown sticks to the top of the page and pushes the Header out of view. When the user scrolls up the Header re-appears and pushes the ToC down.