On this page
A row of links to the sections of a hub page, placed under the hero. It gives a reader a short way to jump to a section without scrolling the whole page.
The directive takes no options and no body. It collects its links from the page, so they stay in sync with the sections.
See the docs-builder documentation hub for a rendered row.
Place the directive directly after the {hero}:
:::{hero}
:icon: kibana
:title: Kibana documentation hub
:description: The UI for the Elasticsearch platform.
:::
:::{on-this-page}
:::
The row lists the hub sections that render as an H2, in page order. Each link uses the section title and points to the section anchor.
| Directive | Listed | Anchor |
|---|---|---|
{get-started} |
Yes | get-started |
{whats-new} |
Yes, when it has an id and a title |
The id field |
{card-group} outside {explore} |
Yes, when it has an :id: and a :title: |
The :id: option |
{explore} at the default level |
Yes, when it has an :id: |
The :id: option |
{explore} with :level: 3 |
No. It renders as an H3. | |
{card-group} inside {explore} |
No. It renders as an accordion. |
A section without an anchor cannot be linked, so it is skipped. Headings written in plain markdown are not listed.
If the page has no listed sections, the directive renders nothing.
To keep the row short, group sections under one {explore} heading and set :level: 3 on the others. See Nested sections.
The row sits below the hero rule, with the "On this page" label on the left and the links to its right. Each link carries a grey rule on its left edge, as in the right-hand table of contents on other pages. The rule and the text darken on hover and keyboard focus.
A short list stays on one line. A longer list wraps onto more lines inside the link column, so the second line never goes under the label. On narrow screens the label sits above the links.