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. 
    User Guide

    Table of Contents Component

    The Table of Contents appears as sticky in-page navigation on Service Detail pages, as well as the Service Directory. It provides jump links to sections of content, so residents do not need to scroll through all content. It does not appear on pages with Side Navigation.

     

    The Table of Contents cannot currently be dragged and dropped onto a page; it must be built in. Future enhancements, if needed, may allow it to be dragged and dropped.

    Overview

    Component name: Table of Contents

    Authors who can use: none; on pages by default

    Templates/page types that can use component: Service Detail; Service Directory

    Required or optional: required

    Authoring Fields

    Adding the Table of Contents component to the page

    The Table of Contents component cannot be added to the page; it appears by default.

    Editing the Table of Contents component

    The Table of Contents component cannot be edited by content authors.

    As H2 sections are added/removed on the page, they automatically appear/disappear in the Table of Contents.

    Figure A: Desktop view of a Service Detail page features the Table of Contents on the left side. It remains sticky when scrolling. Figure A: Desktop view of a Service Detail page features the Table of Contents on the left side. It remains sticky when scrolling.

    Accessibility

    1. Keyboard users will access the in-page navigation (Table of Contents) before the main content on the page. The same applies to pages with the Side Navigation component.

    Other Tips

    1.  The Table of Contents may serve as an outline of page content. Keep this in mind while authoring H2s on the page.

    2.  On mobile/tablet, the Table of Contents is sticky at the top of the page. As the resident scrolls down, the Table of Contents pushes the Header out of view. As the resident scrolls up, the Header re-appears and pushes the Table of Contents down.