Subnav

Subnav components provide a left navigation structure for links not present in the main site navigation.

Subnav Configuration

The subnav component is essentially a list, with the parent tag being a ul list element.

Notes/Options

Points worth noting and frequently used configurations.

• Accessibility: For subnavs to be ADA-compliant, certain ARIA tags and CSS classes must be present in the HTML. To this end, the js-cx-subnav class must be present on the element wrapping the parent ul. With this class in place, JavaScript will insert all the necessary accessibility configurations.
• Active Link: There is JavaScript in place that searches all links in the subnav for matches to the current page URL. If a match is found, the selected CSS class will be applied to the link, and the active class to all parent li elements. The selected class applies a green vertical pipe next to the active link.
• Open Sections: Apply the open class to the li element for a section to display all child links, regardless of which section is open.

Basic Subnav

Here is a subnav with three levels of navigation.

	

		
		
Section 1
		
		

			Section 2
			

				
First Link
				

					Second Link
					

						

							
							Level 3 link (selected)
						
						
Level 3 link 2
						
Level 3 link 3
					
				
				
Third Link
			
		
		
		

			Section 3
			
			

				
First Link
				
Second Link
			
		
	

				

Here is the same HTML code with the accessibility features injected:

	

		
		
Section 1
		
		

			Section 2
			

				
First Link
				

					Second Link
					

						

							
							Level 3 link (selected)
						
						
Level 3 link 2
						
Level 3 link 3
					
				
				
Third Link
			
		
		
		

			Section 3
			
			

				
First Link
				
Second Link