Introducing the table of contents feature
The table of contents feature enables an “On this page” menu for pages and an “In this article” menu for news.
You can enable the table of contents with a simple checkbox in the editor experience. The menu is then generated from the headings within your content.
Why use headings to build the menu?
Headings are not only for visual interest; they give structure to information. They also provide tabular navigation for people using assistive technology like screen readers.
Most visitors come to Portland.gov via search with Google or other search engines. When we provide information that is well-structured, we improve their discovery.
Editors need tools to write content well without also worrying about building menus. The table of contents provides a helpful menu for long-form content without any fuss.
How to structure headings
It’s important to keep headings in order like chapters of a book. Within a page, headings will always start with heading 1. On Portland.gov we use heading 1 for page titles which means the next level you can use on your page is heading 2. The table of contents generates from the heading 2’s within your page.
This article provides an example.
When you need more structure, your heading 2s can contain heading 3's, and sub to that, heading 4's. But, please note that headings 3 and 4 will not show-up in the menu, only heading 2s.
How to add headings to your content
Find headings under the paragraph formatting dropdown menu in the content editor.
Create as many heading 2's in your content as needed. If the list of links in the menu becomes too long, consider breaking your content into more than one page.
How to enable the “On this page” menu
First, format your content with headings. This feature will only work if you have heading 2's in your content. Scroll to the bottom of the editor to find the checkbox for enabling the feature. Select the box to “Display a table of contents.” If you no longer wish for the menu to display on your page, uncheck the box.
Once enabled, the menu will display near the top of your page. When selected they will "jump" you to the point on the page where the header appears. To return to the top, use the "back to top" link.
Have more questions about the intention of this feature or how to use it? Contact powr@portlandoregon.gov for more information.