Digital Design System

Table Of Contents: Dropdown

Consult the Dropdown atom in Forms for more information.

Table of contents dropdown example

<div class="row">
    <div class="table-of-contents col-sm-12">
        <div class="btn-group">
            <button type="button" class="btn btn-lg btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Table of Contents
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" aria-label="">Survey Name - Table of Contents</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#" aria-label="Link, click to read Lorem ipsum first survey in the report">1. Lorem ipsum first survey in the report</a>
                <a class="dropdown-item" href="#" aria-label="Second ipsum survey in the report second ipsum survey in the report second ipsum survey in the report">2. Second ipsum survey in the report second ipsum survey in the report second ipsum survey in the report</a>
                <a class="dropdown-item" href="#" aria-label="Link, click to read...">3. Something else here</a>
                <a class="dropdown-item" href="#" aria-label="Link, click to read...">4. Lorem ipsum first survey in the report</a>
                <a class="dropdown-item" href="#" aria-label="Link, click to read...">5. Second ipsum survey in the report econd ipsum survey in the report econd ipsum survey in the report</a>
                <a class="dropdown-item" href="#" aria-label="Link, click to read...">6. Something else here</a>
            </div>
        </div>
    </div>
</div>

Consult the Dropdown atom in Forms for more information.

Consult the Dropdown atom in Forms for more information.

This feature can be used on a page that is part of an overall research report, survey, edition, or issue when there are 7 or more related articles. If there are fewer than 7, use the related content matrix listing in the right column to achieve the Table of Contents display.

The preferred location for the Table of Contents Dropdown module is at the top of the right column on insights pages, as the first item located immediately to the right of the beginning of the content. Note that when elements inside the dropdown exceed 400px height, a scrollbar will appear allowing the user to scroll within the dropdown. When you put the Table of Contents dropdown in the right column, that it will actually appear at the bottom of the report in both mobile and tablet view.

In the top area of the Table of Contents – add the Survey/Report/Content Overview name and a link to the overview page with the original table of contents listing. The items underneath the divider line in the dropdown should be the contents of the report (e.g. the additional pages). These links need additional aria-label attributes defining that the links are links (vs toggling something on the page).