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. 
    AEM Components

    Table of Contents Component

    The Table of Contents appears as sticky in-page navigation on Service Detail pages. 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 be dragged and dropped onto a page; it is baked in. Future enhancements, if needed, may allow it to be dragged and dropped.

    Learn about Service Detail template
    Learn about Side Navigation

    Overview

    Component name: Table of Contents

    Authors who can use: none; on pages by default

    Templates/page types that can use component: Service Detail

    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. The H2s can be added through various components (Title, Teaser, List, etc.).

    Figure A: Desktop view of a Service Detail page features the Table of Contents on the left side. It is populated by H2s on the page. Figure A: Desktop view of a Service Detail page features the Table of Contents on the left side. It is populated by H2s on the page.

    Accessibility

    • Keyboard users will access the Table of Contents before the main content on the page. The same applies to pages with the Side Navigation component.

    Other tips

    • The Table of Contents serves as an outline of page content. Keep this in mind while authoring H2s on the page.
    • 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 reappears and pushes the Table of Contents down.