Page Index section gives quick summary of all the main topics of the current page. It helps to click and reach particular section of the page quickly.

Page Index appears on the right hand side of the page
The text wraps and have elegant overall view of the page's content summary
Each Heading level have indentations so that heading/content groups and overview of the page is easily understood.

Page Index Sample Output

Page Index Container

Class page-index is the main container class for the Document Page Index
This page-index is under the parent class of a block element with the class of doc-container

Implementation Code Sample

<aside class="page-index">
          
</aside>

Copy

Implementation Code with whole Doc Template

<body class="neon-ui">
<main>
  <article class="docs-container">

    <section class="main-index">
    </section>

    <section class="docs-main">
    </section>

    <aside class="page-index">
    </aside>

  </article>
</main>
</body>

Copy

Page Index Header

Page index header shows what the section is doing. Can change what the page index's "Goal" is in general

Implementation Code Sample

<aside class="page-index">
    <div class="index-item page-index-heading">
      <i class="ph ph-book-open-text index-icon"></i>
      <div class="page-index-head-text">On this page</div>
    </div>
</aside>

Copy

Page Index List Group

Page Item list Container

All the Page index list items are held under the class container page-index-list

<aside class="page-index">
    <div class="page-index-list">
    
    </div>
</aside>

Copy

Each page Item list items

All the Page index list items have the class index-item

<aside class="page-index">
    <div class="page-index-list">

              <div class="index-item  ">
              </div>

              <div class="index-item  ">
              </div>

              <div class="index-item  ">
              </div>

              <div class="index-item  ">
              </div>

    </div>
</aside>

Copy

Page Indentation

To have the proper indentation of the page list, have the class page-index-XX

where the XX is the header element in the page.
e.g. Header H2 will have page-index-h2
e.g. Header H3 will have page-index-h3

<aside class="page-index">
    <div class="page-index-list">

              <div class="index-item page-index-h2">
              </div>

              <div class="index-item page-index-h3">
              </div>

              <div class="index-item page-index-h4">
              </div>

              <div class="index-item page-index-h2">
              </div>

              <div class="index-item page-index-h3">
              </div>

    </div>
</aside>

Copy

Link anchor to click and reach corresponding section

To use the Page Index list, clickable and reach the corresponding section of the page visible, anchor a element is used with href attribute, with corresponding id attribute of the Header in the docs-main area

docs-main page section

<h2 id="h2-1">Main Index</h2>
<h3 id="h3-1">Group Heading</h3>
<h3 id="h3-2">Subgroup Heading & Pages</h3>
<h3 id="h3-3">Grouped Pages</h3>

Copy

page-index page section

<aside class="page-index">
    <div class="page-index-list">
                
        <div class="index-item page-index-h2">
          <a href="#h2-1">Main Index</a>
        </div>
        <div class="index-item page-index-h3">
          <a href="#h3-1">Group Heading</a>
        </div>
        <div class="index-item page-index-h3">
          <a href="#h3-2">Subgroup Heading & Pages</a>
        </div>
        <div class="index-item page-index-h3">
          <a href="#h3-3">Grouped Pages</a>
        </div>

    </div>
</aside>

Copy

Completed Full Page List Code

Page Index Sample

docs-main page section

<h2 id="h2-1">First Heading</h2>
<h3 id="h3-1">Subheading</h3>
<h4 id="h4-1">First Para</h4>
<h2 id="h2-2">Second Heading</h2>
<h3 id="h3-2">Subheading</h3>
<h4 id="h4-2">Second Para</h4>

Copy

page-index page section

<article class="docs-container">
  <section class="main-index"></section>
  <section class="docs-main"></section>

  <aside class="page-index">
    <div class="index-item page-index-heading">
        <i class="ph ph-book-open-text index-icon"></i>
        <div class="page-index-head-text">On this page</div>
    </div>

    <div class="page-index-list">
        <div class="index-item page-index-h2">
          <a href="#h2-1">First Heading</a>
        </div>
        <div class="index-item page-index-h3">
          <a href="#h3-1">Subheading</a>
        </div>
        <div class="index-item page-index-h4">
          <a href="#h4-1">First Para</a>
        </div>
        <div class="index-item page-index-h2">
          <a href="#h2-2">Second Heading</a>
        </div>
        <div class="index-item page-index-h3">
          <a href="#h3-2">Subheading</a>
        </div>
        <div class="index-item page-index-h4">
          <a href="#h4-2">Second Para</a>
        </div>
    </div>
  </aside>
</article>

Copy

Output - Primary index (only)

Layout - Main Doc

Typography - Headings