Table of contents

The table of contents pattern is used in multi-step forms such as application sections or workflows to indicate location and provide the ability to jump back to a specific chapter.

<div class="sba-c-table-of-contents">
  <p class="sba-c-table-of-contents__heading">Basic Eligibility</p>
  <ol class="sba-c-table-of-contents__list">
    <li class="sba-c-table-of-contents__list-item"><a href="#">Steps of Application</a></li>
    <li class="sba-c-table-of-contents__list-item current"><span class="sba-u-visibility--screen-reader">Current location:</span> Update Your Info</li>
    <li class="sba-c-table-of-contents__list-item">Is Your Firm Small?</li>
    <li class="sba-c-table-of-contents__list-item">Your Firm’s Size
      <ul>
        <li>Sub-item 1</li>
        <li>Sub item 2</li>
      </ul>
    </li>
    <li class="sba-c-table-of-contents__list-item">About Your Firm</li>
  </ol>
</div>

Guidance

• User may not skip ahead of current position
• Lists can be ordered or unordered
• The current location is indicated with class name of current

Accessibility considerations

• Provide a non-visual alternative to indicate current location

When to consider something else

• When breadcrumbs would be more appropriate
• When items following any current location cannot be determined