On This Page Component

Table of contents built dynamically from page headings.

On this page:

Last reviewed: May 10, 2021

This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.

On This Page automatically displays all title headings on a page as anchor links in a list. Clicking on an item in the list jumps you down to that content on the same page.

This component can be placed in the center well, in a Related Content Container, or a sidebar.

On the left, the component as it is first displayed on the page, and on the right, opened for editing.

On the left, the component as it is first displayed on the page, and on the right, opened for editing.

Using This Component

Add the component to the page. There is only one tab.

When the component is placed on a regular Web page in Author, and the page is refreshed, the index will show all matching headings on the page.  On a shared content page, it will just state "There are no links to display in this On This Page component." but when that shared content is displayed on a regular webpage, the index will be populated normally.

Header: Enter a descriptive heading. The default is "On This Page:". Leave blank to hide the heading.

Heading level: Choose from 1 to 4; the default is 2.

  • If you choose Custom, more choices are provided — see Advanced Use.

Item Range: Specify if you wish to only show some of the page's titles (e.g. 1-3 or 4-6). This is especially useful in column mode.

The component showing Heading Level options.

The component showing Heading Level options.

Home pages and single-column pages need custom settings

On This Page is designed to display headings from the center column of a standard page. To work on a home page or a single column page, use the Custom Filters option: "#center-nocols h2". Read more about Custom Filters in the Advanced Use section.

Does Your Page Use Shared Content?

Links to headings that are actually within Shared Content will not work correctly unless they are given an ID on each Title component in the Shared Content page.

Known Issue

When added to a shared content page, this component will just say "There are no links to display in this On This Page component," but the index will display normally when that content is on a regular webpage. > details

Restrictions

  1. Some components (e.g. Title) have a setting to be excluded from On This Page lists.
  2. Links to headings that are actually within Shared Content will not work correctly unless they are given an ID on each Title component in the Shared Content page.
  3. On This Page will not include headings from inside a Collapsible Content Container. See the Advanced Use section for a workaround.
OTP Will Not Include Headings from a Collapsible Content Container

See the Advanced Use section on custom settings for a workaround.

Advanced Use - Customizing the List

  • Choose Heading Level: Custom to switch on Custom Filters. Then enter a valid jQuery selector expression.
  • Some examples follow:
    • "#center-nocols h2" includes level 2 headings from the main content on a home page.
    • "#center h2" limits your list to level 2 headings found in the DIV element with an ID of "center" (i.e. the center well).
    • "#right h2" limits your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
    • "#left h2" limits your list to level 2 headings found in the DIV element with an ID of "left" (i.e. the left nav sidebar).
    • "#right h2" limits your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
    • "#center h2, #right h2" includes level 2 headings from the center well AND the right sidebar.
  • Title and Collapsible Content Container components can be excluded from the On This Page listing by selecting the checkbox within the settings of those individual components.
  • On This Page will not include headings from inside a Collapsible Content Container. To specifically list those headings, make sure that Collapsible Content COntainer has an ID set, then use the Custom setting plus "h3[id^=abc]" where h3 is the desired heading level, and 'abc' is the ID of the Container.
The component opened for editing showing custom Heading Level option (e.g. "#center h2").

The component opened for editing showing custom Heading Level option (e.g. "#center h2").

See an Example

Watch a Training Video

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)