AAG Header

Header:

• The AAG Header will be displayed on all pages of the site at the top of the page.
• The Header has been implemented using Partial Designs. It is located here - /sitecore/content/EH/AAG/Presentation/Partial Designs/Header.
• This partial is added to the Page Design.
• AAG Header has 3 sections: Quicklinks, Logo, Flyout Nav

Quicklinks

• The Quicklinks section is made up of Component which resides under the EH Navigation tab by the name Heading Link List. It contains 2 types of links:
  • Quicklinks with child items  - A separate class link-fill-background is added to change the background color of  Style Class
  • Button link with no child items - This is the regular Heading link list with no special class added

Logo

• The Header Logo section consists of 2 components: 
  • Header Logo- Resides inside Media tab in the Toolbox by the name Image(reusable)
  • Help text- Resides under thePage Content tab by the name Rich text (Reusable)

Flyout Nav

• The Flyout Nav is made up of Component which reside under EH Navigation tab by the name Link List Navigation

Experience Editor

1. Locate Header which will be under Partial Designs underneath Presentation in the Content Tree. 

2. Open Up in Experience Editor

3. Content Authors will be able to manage the logo link, quick links and primary navigation from this window. 

4. Click the section you would like to edit. 

5. Manage the Links

Content Editor 

Content Authors can easily add links and manage links under the Data source for Header. 

1. Open Up CE 

2. Locate Main Navigation and/or Quicklinks Navigation which will be located under Link List Navigation underneath global Data

3. To Add an additional section, right click Main Navigation

4. Insert Link List

5. Name Data Source

6. Right Click Link List to add links in Link List

7. Manage Link Properties

8. Save and publish changes 

Content Authors can manage the order of the links in EE and/or CE. For more on managing links, please check out the following sections: 

• Link

AAG Header:

• The Header should be displayed from every page on the microsite. 
• The Header will be implemented based on the live site. *
• The Header will contain the following elements:
  • Header Container
  • Image Variant for logos (links to home page)
  • Click to Call (RTE)
  • Utility Nav
    • Button link (Covid-19)
    • Quick links (Flyout Nav)
    • Button link (Donate Now)
  • Flyout Nav
• The Quick Links has a sub menu
• The user should be routed back to the home page upon clicking logo images.
• All styling should be pulled from live site following AAG Brand Guidelines
• Upper and Lower case to be used for all menu items* (Content Governance)
• Upon hover on telephone number changes to AAG orange
• This component must follow accessibility standards for Alt text, and keyboard navigation

Flyout Nav:

• Sublink menu
• One Link list
• It will break into 4 columns
• Upon hover of flyout, should show sub menu
• Upon hover text will change color
• The CA will add links manually
• Flyout Nav Labels
• For all styling see live site

Quick Links:

• The quick link menu will display a single URL link list.
• Background Color (no hover, remains green)
• #01818E
• White font
• Click to open
• Should allow for unlimited links
• Upon hover of links text will change color
• #C75300
• links should allow for pages, files and external URLs.
• The CA should be able to update the titles of the links
• Quick Link Labels
• Admissions
• Referrals
• FAQS
• Contact Us
• For all styling, please see live site.

Mobile:

• See requirements above
• Upon load in mobile, only the following elements should be displayed
• Header logo image
• Hamburger Menu
• Click to call button
• Upon click underline number
• Upon user clicking on menu, it will expand
• Expanded menu will open and display two vertical lists separated with a border
• The Menu Button should convert to a Close button with an X
• Upon Click of About Us it will open to the About Us page
• Adding a carat to About us to indicate sub menu to open sub menu items.
• Upon user clicking About us Carat it will open submenu.
• The primary topic-based navigation slides open right to left, opened using the main menu” hamburger' menu Icon.
• Quick links will display inside the mobile menu below the top navigation area. *
• User can click on click links and links will appear in a list
• Upon User clicking on links will change to orange and route page.
• Upper and Lower case to be used for all menu items* (Content Governance)
• The User should see a carat on Quick links indicating additional links are available.
• Upon click of carat will expand list.
• Follow live site for designs and functionality *