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. 
    Experience Fragments

    Side Navigation Component + Experience Fragment

    Side Navigation is a menu placed at the left (desktop) or top (mobile/tablet) of certain page templates. It provides a hierarchical, vertical navigation of pages in a designated section of the site. Residents will use Side Navigation to move across the site and to locate their current page within the hierarchy. Side Navigation is required on Agency Content Page templates, and is unique to each agency. It does not appear on pages with Table of Contents.

     

    Side Navigation is a component referenced through an Experience Fragment (XF). When authors edit the XF, the changes subsequently appear on all pages with that version of Side Navigation. It cannot be edited on an individual page.

    Learn about moving pages
    Learn about Table of Contents

    Overview

    Component name: Side Navigation

    Authors who can use component: none; baked in to pages

    Templates/page types that can use component: Agency Content Page, Agency News Article

    Required or optional: required

    Authoring Fields

    Creating a new Side Navigation Experience Fragment

    Side Navigation XFs will appear by default on the Agency Content Page and Agency News Article templates. In nearly all circumstances, Admins should edit the existing XF, rather than create a new one. To edit, skip to “Editing the Side Navigation Experience Fragment” section below.

    Sapient’s development team will configure the Side Navigation XF so it appears on all relevant agency pages. For testing purposes, the steps to create a new Side Navigation XF are below.

    1. From the landing Navigation page, click on Experience Fragments.

    Landing navigation page, featuring Experience Fragments

    2. To create a new Side Navigation XF, click through the folders to the correct agency. In this example, that agency is DHS. Click through CoPA PWP PAGov Fragments, then English, then DHS.

    AEM's Experience Fragments section, with DHS selected

    3. Click “Create” and “Experience Fragment” from the top right menu.

    4. On the Create Experience Fragment page, click “Web Variation,” then “Next.”

    5. Add a title, then click “Create.”

    6. Click “Open.” The XF editing page will open in a new tab.

    7. Hover over "Drag components here" so it highlights blue. Click the plus sign. From Insert New Component, select Side Navigation.

    Editing the Side Navigation Experience Fragment

    1. From the Navigation page, select “Experience Fragments.”

    Navigation landing page with Experience Fragments as option

    2. From the hierarchy page, click through the relevant agency folders. In this example, that agency is DHS. Click through CoPA PWP PAGov Fragments, then English, then DHS, then Side Navigation, then Side Navigation. Select the checkbox, then “Edit” from the top navigation menu.

    AEM's Experience Fragments section, with DHS' Side Navigation selected

    3. The author is now on the XF authoring page. Select the edit wench from the toolbar.

    DHS' Side Navigation authoring dialog featuring edit toolbar

    4. Properties Tab 

    Properties tab forSide Navigation Experience Fragment including title, title heading level, and navigation root fields

    a. Title field: Add a title for the Side Navigation menu.

    b. Title Heading Level dropdown: Add a heading level between H2-H6. Default is H2.

    c. Navigation Root pathfinder: Select the page within AEM from which the navigation menu should be built. Links will populate on the Side Navigation menu based on the site hierarchy from below the root page.

    d. Disable shadowing checkbox: Shadow pages are used to redirect residents to external links. When checked, shadow pages will not link out, and will instead show the shadow page as built in AEM. Default unchecked. Leave unchecked in order to link to external pages, such as services on non-AEM sites.

    5. Accessibility tab

    a. Label field: Add a label for accessibility purposes.

    6. Click “Done.” The component will now update across all pages with that specific Side Navigation XF.

    Sample DHS page, with the agency's Side Navigation displaying to the left of other page content

    Adding the Side Navigation component to the page

    Side Navigation will appear by default on all agency page templates. Once on a page, it cannot be edited.

    Editing the site hierarchy

    Links will appear in the Side Navigation menu according to the order they appear in the site hierarchy. It is possible to change this order, and move pages under/over other pages. Reference the Moving and Copying Pages user guide for more info.

    If pages are rearranged, they must be republished for the Side Navigation to show the new order.

    Accessibility

    • Level Access will flag multiple accessibility issues if a link name is used more than once in the Side Navigation. Ensure all of the links have a unique title.
    • Keyboard users will access the Side Navigation before the main content on the page. The same applies to pages with the Table of Contents component.

    Other tips

    • Side Navigation will show up to three levels of pages. These are referred to as the parent pages, children pages, and grandchildren pages.
    • On the live site, the page the resident is currently on will be highlighted.
    • The items in the Side Navigation menu are displayed in the same order as seen in the authoring view. Authors can rearrange the menu order via the list view in AEM. Once pages are reordered, they must be republished.
    • Authors are unable to change the root level from which the Side Navigation pulls the pages.
    • External links cannot have children or grandchildren pages.
    • External links will act as a redirect. Create a shadow page in order to use an external link.
    • If Side Navigation is on a page, there will be no Table of Contents.