University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

On This Page Component

This component acts as a table of contents or index for pages that have lots of content.

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.

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.

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.

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.

Advanced Use - Customizing the List

  • Choose Heading Level: Custom to switch on Custom Filters. Then enter a valid jQuery selector expression.
    • For example: "#center h2" would limit your list to level 2 headings found in the DIV element with an ID of "center" (i.e. the center well).
    • For example: "#right h2" would limit your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
    • For example: "#left h2" would limit your list to level 2 headings found in the DIV element with an ID of "left" (i.e. the left nav sidebar).
    • For example: "#right h2" would limit your list to level 2 headings found in the DIV element with an ID of "right" (i.e. the right sidebar).
    • For example: "#center h2, #right h2" would include 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.
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").

Was this page helpful?

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

Known Issue

When added to a shared content page, this component may appear blank, but the titles should display when that content is on a regular Web page.
> details

On this page:

See an Example:

Learn how to put a quick link to the top of your page.

Related Components:

Last Reviewed:

December 14, 2016