Side Navigation
Demonstration
Code
<!--{ @class "print:hidden" will hide this element when it is printed }-->
<nav aria-label="On this page" class="c-side-navigation print:hidden">
<ol>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="how-it-works" href="#how-it-works">How it works</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="determine-your-eligibility" href="#determine-your-eligibility">Determine your eligibility</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="what-you-need-to-include" href="#what-you-need-to-include">What you need to include</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a class="active" data-step-go-to="how-to-apply" href="#how-to-apply">How to apply</a>
</li>
</ol>
</nav>
The Side Navigation is an in-page navigation element that allows users to understand the contents of a page or navigate a paginated step-by-step instruction. It is most closely associated with the In-page Navigation Component in the U.S. Web Design System (USWDS) with a few key differences.
The Side Navigation is used by the Step by Step pattern to create a paginated experience that helps users understand how to apply to public benefit programs.
The nav element must have a unique aria-label attribute to help screen readers distinguish it from other nav elements. Recommendations for the label from the USWDS include “On this page,” “In this article,” or “Table of contents.”
Demonstration
Code
<!--{ @class "print:hidden" will hide this element when it is printed }-->
<nav aria-label="On this page" class="c-side-navigation print:hidden">
<ul>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a data-step-go-to="" href="#">Training Sessions & Events</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a data-step-go-to="" href="#">Promotional Materials</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a data-step-go-to="" href="#">Newsletter</a>
</li>
<li>
<!--{ @data-step-go-to Indicates this a toggling element for jumping to and revealing a step for the "Step by Step" pattern. The value should match the step region's @data-step attribute }-->
<!--{ @href Used by the "Step by Step" to target the step region by its ID }-->
<a data-step-go-to="" href="#">Link to ACCESS NYC</a>
</li>
</ul>
</nav>
The Side Navigation can use an unordered list display for an in-page navigation.
The nav element must have a unique aria-label attribute to help screen readers distinguish it from other nav elements. Recommendations for the label from the USWDS include “On this page,” “In this article,” or “Table of contents.”