Header Experience Fragment

Component name: Header

Authors who can use: admin only

Templates/page types that can use component: all

Required or optional: required

There is only one Header for PA.gov, which has already been created. In nearly all circumstances, Admins should edit the existing version, rather than create a new one. To edit, skip to “Editing the Header Experience Fragment- in general” section below.

For testing purposes, the steps to create a new Header are below.

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

2. To create a new Header XF, click through the folders of the site that needs a Header. In this example, that folder is CoPA PWP PAGov Fragments. Click on the language folder, then “Global.”

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

1. On the Create Experience Fragment page, click “Web Variation,” then “Next.”
2. Add a title, then click “Create.”
3. Click “Open.” The XF editing page will open in a new tab.
4. Once created, Sapient will set the Header to appear on all pages.

The Header is built into all AEM-managed PA.gov pages. It appears at the top of pages by default.

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

2. To edit the main PA.gov Header, click on CoPA PWP PAGov Fragments folder.

1. To edit another Header, such as the Web Content Management (WCM) site, click on that site’s folder and follow the same directions below.

3. Click through the folders until “Header” is reached. Click the checkbox, then click “Edit” from top navigation.

4. On the screen is the Edit page, with only the Header displayed. Editing the Header here will affect the Header on all PA.gov pages.

1. Hover over the blue outline of Header. With the edit wrench, open the component.

2. Banner tab

1. Banner Image field: Use the folder to find the correct banner image in the DAM. This image will appear in the Banner.
2. Banner Image Alt Text field: Add alternative text for accessibility.
3. Modal Label field: Add text that will display as the link label for the Modal. This text will be blue and underlined, and will open the Modal when clicked.
4. Modal Name field: Add the name of the Modal as created in the Modal component. Reference the Modal Component User Guide for more details.
5. Banner Text field: Add text that will display as the text for the rest of the banner. This text is not clickable.

3. Navigation Bar tab

1.  Logo Image field: Use the folder to find the correct logo image in the DAM. This image will appear in the Navigation Bar.
2. Link URL field: When users click on the logo image, they will be taken to this link. It should be the homepage of the site (PA.gov). Use the folder to find the page within AEM.
3. Logo Image Alt Text field: Add alternative text for accessibility.
4. Enable Search checkbox: When checked, displays the Quick Search bar. Default checked.
5. Enable Language Selector checkbox: When checked, displays the language selector feature. Default unchecked. Post-MVP feature; not currently available.
6. Enable Profile Management checkbox: When checked, displays the profile management feature. Default unchecked. Post-MVP feature; not currently available.

1. Hover over the blue outline of Navigation Menu. With the edit wrench, open the component 

2. Navigation Menu

1. Navigation field: Add either a dropdown label or a button label. A dropdown label has multiple links underneath, while a button is a standalone link. Text entered in this field will display on the Navigation Menu. Example: a dropdown labeled “Benefits & Services” shows multiple links underneath when clicked, while a button labeled “Your Government” is a standalone link.
2. If adding a dropdown label, continue to 2.b, Group Heading. If adding a button label, continue to 2.a.i below.
   1. Add URL for button label field: Add the link for the button. Use the folder to find a page within AEM, or copy/paste an external link.

3. Group Heading multifield: Add a Group Heading to appear below the dropdown. Group Headings are not clickable. They help organize content if a dropdown has multiple subjects. Example: a dropdown labeled “Benefits & Services” has the Group Heading “Families & Children” and the Group Heading “Seniors.”

i. Note that Group Headings are optional. Authors may skip the Group Heading and go straight to step 2.d.

Figure A: Benefits & Services dropdown will have two Group Headings, as the fields were filled.

Figure B: Get or Renew Licenses dropdown will not have Group Headings, as the field was left blank.

4. Under Title, click Add.

5. Title field: Add a title label. This appears in the dropdown as clickable text.

6. Add URL for Title field: Add the link that the title will lead to. Use the folder to find a page within AEM, or copy/paste an external link.

7. Continue adding Titles to the same Group Heading until done.

8. Continue adding Group Headings to the same Navigation dropdown, repeating steps 2.b – 2.f, until done.

9. Continue adding Navigation dropdowns and buttons, and repeating steps 2.a – 2.g, until done.

        Figure C: Navigation Bar as it appears in the Header.

Figure D: Benefits & Services dropdown, which features two Group Headings.

Figure E: Get or Renew Licenses dropdown, which features no Group Headings.

1. Landmark regions have been built into the Header to allow users with assistive technologies to quickly move through the Header options.
2. Keyboard support has been built into the Header to move keyboard focus across the Navigation Menu.

1. Use the Emulator widget to test Header size on different devices.
2. There is no max number of dropdowns/buttons on the Navigation Menu.
3. Group Headings are not clickable links.
4. Links can be internal or external. External links have an external icon, and will open a new tab when clicked.