On-page navigation bar

PATTERN OVERVIEW

Prominently feature jump links to main sections of the page to improve the discoverability of content found lower on the page. 

Guidelines

• Content on the page is organized into four to five distinct sections labeled with a H2 heading. A corresponding label is added to the bar to serve as the jump link to the section found lower on the page. 
• Use the headings and labels recommended by the DMX team to help maintain a consistent nomenclature across the site. Variations are permitted when necessary but should be first discussed with the DMX team.
• "Explore solutions" should be listed first (left) and "Contact us" should appear last (on the right).
• "Contact us" is a standard hyperlink that links to a page built for the needs of the target audience.
• This pattern is used on the top tier solution (How we help) or the segment (Who we help) landing pages.
• Note: Usage on other pages or variations must be approved by the DMX team.
• The .oi-arrow-down icon precedes the jump link label. Add the icon inline via the text editor "Source edit mode" to allow the manipulation of the html code.

AEM component: Use the text3 and column control to build this pattern.

specifications

Label: Up to 20 characters (including spaces). Note: An exception may be made since it is more crucial that the label is understood by users. 

Type: Use initial cap

Type alignment: Labels are centered and ideally should appear on one line and never exceed more than two lines. When a second line is required, the label is manually broken using a <br> tag. 

Headings and labels: Labels in the on-page navigation bar should match the headings found lower on the page. If necessary a label can be truncated.  

Pattern restrictions: With the exception of the “Contact us” link, all other labels link to sections found lower on the page.