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

    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 for each agency.

     

    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.

    Overview

    Component name: Side Navigation

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

    Templates/page types that can use component: pages within an agency’s section (ex. all DHS Agency Content Pages under the DHS section)

    Required or optional: required

    Authoring Fields

    Creating a new Side Navigation Experience Fragment

    Side Navigation XFs will appear on the relevant Agency Content Page 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.

    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 --> English --> 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.

    8. Sapient’s development team will configure the Side Navigation XF so it appears on all relevant Agency Content Pages for that agency.

    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 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 following folders: CoPA PWP PAGov Fragments --> English --> desired agency folder --> Side Navigation --> 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 for 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

    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 Pages page for more info (coming soon).

    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.

    Other tips

    1. Use the Emulator widget to test Hero size on different devices.

    a. If using an image: On desktop, the image can appear on the left or on the right. On mobile/tablet, the image is always on top.

    2. A maximum of two CTAs can be added.

    3. If an Image is enabled, text should always be aligned left.

    4. A white background can be added to the Hero. Use the Container component to add this styling.