Table of Contents

The Table of Contents element builds a list of links from the headings that are already on the page and marks the one the visitor is reading. Nothing has to be maintained by hand: edit a heading and the list follows.

Adding the element

Add an element in the YOOtheme Pro builder and pick Table of Contents from the Planckie Elements group. Place it where the list should appear — a sidebar, the top of an article, a sticky column.

The list is assembled in the browser from the headings it finds, so the element is empty in the page source and fills in as the page loads. When it finds no headings at all it hides itself, unless you gave it a title; then the title stays and the list below it is empty.

Content

Option	Description
Title	An optional headline above the list, for example In this article. Empty by default, and the element then renders the list alone.

Settings

Title

Option	Description
Style	A heading or text style of the active theme style, from Heading 3X-Large down to Text Small.
Outline text	Draws the title as an outline instead of filled type.
Decoration	A divider, a bullet or a line vertically centered to the heading.
Font Family	Default, Primary, Secondary or Tertiary, where the style has more than one.
Color	Muted, Emphasis, Primary, Secondary, Success, Warning, Danger or Background.
Title Element	h1 to h6, or div. h3 by default.

The whole group is only active while the Title field has text.

Source

Option	Description
Source	Whole Page, the default, or Custom Selector.
CSS Selector	The container to scan, for example .uk-article. The first match wins, and an empty field falls back to the whole page.

Whole Page means the whole body, so headings in a navbar, a sidebar or a footer are collected along with the article. On a page where that matters, scope the element to the content container instead.

Headings

Option	Description
Headings	Six switches, h1 to h6, all on by default. The element stays empty while none is selected.
Hierarchy	Show as nested list indents lower levels under the one above; off gives a flat list.

Nesting follows the order of the levels you selected rather than the absolute heading level. Pick h2 and h4 only, and an h4 sits one step under the h2 rather than two.

Nav

Option	Description
Style	Default, Primary, Secondary or None, matching the nav styles of the active theme style.
Show dividers	A line between entries.
HTML Element	nav by default, or div or aside.

Setting the element's Text Align to center in the General group also centers the list.

Scroll

Option	Description
Scroll Offset (px)	0 to 300, 0 by default. Keeps the target heading clear of a sticky header, and also decides how early an entry is marked as current.

Accessibility

Option	Description
ARIA Label	Names the navigation landmark. Left empty, it reads the title, or Table of contents when there is none. It applies to the nav and aside elements; div is not a landmark and takes no name.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-table-of-contents, .pe-table-of-contents-title, .pe-table-of-contents-list, .pe-table-of-contents-item, .pe-table-of-contents-link

The list itself is a UIkit nav, so it also carries the uk-nav classes of the style you picked, nested levels are uk-nav-sub, and the entry being read carries uk-active — the hook to reach for when you want the current item to look different. The element defines no CSS custom properties; spacing, color and type come from the active theme style.

Accessibility and keyboard

With the HTML element set to nav or aside, the list is a named landmark, so screen reader users can jump to it directly. div renders the same list without the landmark, for a table of contents that is decorative or repeated on the page.

The entries are ordinary links and behave like them: Tab moves through them, Enter follows one, and Ctrl, Cmd or middle click opens a section in a new tab. Following an entry scrolls the page and then moves keyboard focus to the heading itself, so Tab continues from the section rather than from the top of the document. The current entry is marked with aria-current="location".

Scrolling is smooth unless the visitor has reduced motion enabled in their system settings, in which case the page jumps straight to the heading.

Notes and limits

• The list is built in the browser. It is not in the page source, and a visitor with JavaScript disabled sees no list — the element hides itself instead, or shows only the title.
• Headings inside a modal or dialog, inside another table of contents, or with no text at all are skipped.
• A heading without an id gets one, generated from its text and added to the page so the link has something to point at. Duplicates are numbered -2, -3, and headings that already have an id keep it, so links you published earlier keep working.
• The list re-scans shortly after the page content changes, so headings revealed by a tab, an accordion or a filter appear in it without a reload.
• A CSS selector the browser cannot parse finds nothing, and the element then behaves as if the page had no headings.
• Only the first element matching the selector is scanned. To cover several containers, give them a shared class and use that.