Components Sample
Documentation
General
Template
Layout
Typography
Navigational
Informational
Data
Input
Images
Header
Footer
NeonUI-Documentation Main Index Layout
NeonUI Doc Layout

Main Index Layout of the Document Sections

List of Navigational links

Main Index with Group and Subgroups

  • Main Index has Group Heading, SubGroup Heading, Subgroup Pages
  • The class main-index is used on any block objects once .
  • Rest of the Group Heading, Subgroup Heading and Subgroup Pages are added under the hierarchy of main-index class

    Implementation Code

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

Class main-index is added once under which all other Group Headings, Subgroup Headings, Pages as child elements

Group Headings

  • Group Heading links reflect major information category

  • On clicking, each Group Heading will fetch a set of main subgroup pages index list

  • class active will highlight the current active group heading link
  • Icons could be added from different free icons using the NeonUI Icons library for the headings. NeonIcons Library

Sample Group Heading Output

First Group Page
Second Group Page

Implementation Code

<section class="main-index">                      
    <div class="index-item main-index-heading active">
      <i class="ph-bold ph-stack"></i>
      <a href="">First Group Page</a>
    </div>
    <div class="index-item main-index-heading ">
      <i class="las la-book"></i>
      <a href="">Second Group Page</a>
    </div>
</section>
Copy

SubGroup Heading and SubGroup Pages

  • Subgroup heading has no pointer actions (unclickable)

  • Clicking Subgroup page index item will fetch the document info of that subgroup topic page

  • Icons could be added from different free icons using the NeonUI Icons library for the headings. NeonIcons Library

  • Adding class active (current page) on Subgroup page index item will have a bold highlight

    • Sample SubGroup Heading and Subgroup Pages Output

    SubGroup

    Implementation Code

    <section class="main-index">                      
    <div class="index-item main-index-group-heading">
      <i class="ph ph-puzzle-piece"></i>
      <div class="main-index-heading-text">SubGroup</div>
    </div>
    <ul class="main-index-group">
      <li><a href="" class="main-index-item active" href="">Intro Page</a></li>
      <li><a href="" class="main-index-item " href="">Second Page</a></li>
    </ul>
    </div>
</section>
    Copy

    Grouped subgroup pages

  • Subgroup pages can be grouped
  • Pages could be hidden and shown using have expandable (arrow icons) accordion component.
  • class active will highlight the current active subgroup page

    Grouped Subgroup Pages Output

    SubGroup

    • Implementation Code

    <section class="main-index">                      

    <div class="index-item main-index-group-heading">
      <i class="ph ph-puzzle-piece"></i>
      <div class="main-index-heading-text">SubGroup</div>
    </div>

    <ul class="main-index-group">
      <li>
        <a href="" class="main-index-item active" href="">Intro Page</a>
      </li>

      <li>
        <div class="main-index-item accordion-index-group-head show  ">
          Expandable
          <i class="fa-solid fa-angle-right"></i>
        </div>

        <ul class="accordion-index-group-list show">
          <li>
            <a class="main-index-item   " href="">
              Page One
            </a>
          </li>
          <li>
            <a class="main-index-item  " href="">
              Page Two
            </a>
          </li>
          <li>
            <a class="main-index-item   " href="">
              Page Three
            </a>
          </li>
        </ul>

      </li>
    </ul>

</section>
    Copy
Prev
Layout - Docs Layout
Next
Layout - Main Doc