Maybe you want to have a single page documentation and use sidebar navigation for navigating inside the page. So this sample layouts are for you. Even maybe you'd like to use top navigation bar for navigating between your pages.

HTML Structure

While this page is enough to see through its code and get start with it, but you can see the page code structure in below. Make sure you'll have data-spy="scroll" data-target=".sidebar" data-offset="200" attribute in <body> tag. Also, .sidebar has a .sidebar-line class.


<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>

  <body data-spy="scroll" data-target=".sidebar" data-offset="200">

    <header class="site-header navbar-transparent">
      ...
    </header>


    <main class="container">
      <div class="row">

        <!-- Sidebar -->
        <aside class="col-sm-3 sidebar sidebar-line">

          <ul class="nav sidenav dropable sticky">
            <li><a href="#sec1">Section 1</a></li>
            
            <li>
              <a href="#sec2">Section 2</a>
              <ul>
                <li><a href="#sec2-1">Section 2-1</a></li>
                <li><a href="#sec2-2">Section 2-2</a></li>
              </ul>
            </li>
            <li><a href="#sec3">Section 3</a></li>
          </ul>

        </aside>
        <!-- END Sidebar -->


        <!-- Main content -->
        <article class="col-sm-9 main-content" role="main">

          <section>
            <h2 id="sec1">Section 1</h2>
            ...
          </section>


          <section>
            <h2 id="sec2">Section 2</h2>
            ...
            <h3 id="sec2-1">Section 2-1</h3>
            ...
            <h3 id="sec2-2">Section 2-2</h3>
            ...
          </section>


          <section>
            <h2 id="sec3">Section 3</h2>
            ...
          </section>
          
        </article>
        <!-- END Main content -->
      </div>
    </main>


    <!-- Footer -->
    <footer class="site-footer">
      ...
    </footer>
    <!-- END Footer -->

    <!-- Scripts -->

  </body>
</html>

Variations

Checkout different variation of sidebars that you have for single page documentation.

sample1

Default

Demo
sample2

Side line

Demo
sample3

Boxed sidebar

Demo

Title

Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.

Fusce porttitor diam mauris, in fringilla elit euismod non. Aliquam non justo suscipit, pellentesque felis quis, egestas ante. Nunc quis imperdiet mauris, vitae cursus ante. Aenean vel efficitur ante, ullamcorper tempus massa. Integer ornare urna vitae quam semper fermentum. Mauris in dolor tempus, ultricies quam ac, lacinia nisl. Donec vitae ante sem.

Subtitle 1

Nulla nec leo sit amet enim vestibulum imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ac purus ac nisl scelerisque feugiat. Sed ultricies rhoncus congue. Vivamus sagittis, ligula vitae ornare pretium, lectus tellus mattis leo, non ultricies urna odio eu justo. Suspendisse euismod varius ante sed vehicula. Phasellus dignissim hendrerit auctor. Nulla et vulputate ipsum. Aenean ultricies sed libero ac finibus. Donec ornare vestibulum orci, non porta dui pharetra quis. Maecenas luctus risus velit. Ut in aliquam urna. Ut luctus lorem in massa egestas, a mollis diam auctor. Maecenas mollis dui eu ipsum dictum fringilla. Nunc nisl magna, vestibulum vel purus eu, feugiat luctus elit.

Phasellus dictum magna eget enim suscipit ornare. Sed in mollis nibh. Quisque odio tortor, molestie eget ullamcorper a, aliquam faucibus nisi. Sed mi risus, semper tincidunt ultrices ac, aliquet vel elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at mi bibendum, congue risus ac, eleifend ex. Sed malesuada eros eget purus varius molestie. Pellentesque aliquet sapien nec turpis tincidunt vehicula. Vestibulum nisi nulla, vulputate ac nibh quis, feugiat rhoncus nunc. Nullam et magna tempus lacus tincidunt laoreet non in ex. Donec auctor accumsan iaculis. Duis cursus eleifend efficitur. Cras placerat nisi magna, at varius sem bibendum sed.

Subtitle 2

Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.

Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis. Fusce ac consectetur leo. Praesent dapibus interdum arcu, et hendrerit mi imperdiet eget. Morbi volutpat, leo id interdum aliquet, massa justo vestibulum nisl, eget posuere velit diam ac nibh. Duis tellus enim, porttitor id lectus vitae, tristique congue odio. Duis elementum porttitor nibh et porta. Suspendisse potenti.

Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.

Subtitle 3

Fusce porttitor diam mauris, in fringilla elit euismod non. Aliquam non justo suscipit, pellentesque felis quis, egestas ante. Nunc quis imperdiet mauris, vitae cursus ante. Aenean vel efficitur ante, ullamcorper tempus massa. Integer ornare urna vitae quam semper fermentum. Mauris in dolor tempus, ultricies quam ac, lacinia nisl. Donec vitae ante sem.

Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.

Subtitle 4

Phasellus dictum magna eget enim suscipit ornare. Sed in mollis nibh. Quisque odio tortor, molestie eget ullamcorper a, aliquam faucibus nisi. Sed mi risus, semper tincidunt ultrices ac, aliquet vel elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at mi bibendum, congue risus ac, eleifend ex. Sed malesuada eros eget purus varius molestie. Pellentesque aliquet sapien nec turpis tincidunt vehicula. Vestibulum nisi nulla, vulputate ac nibh quis, feugiat rhoncus nunc. Nullam et magna tempus lacus tincidunt laoreet non in ex. Donec auctor accumsan iaculis. Duis cursus eleifend efficitur. Cras placerat nisi magna, at varius sem bibendum sed.

Donec lacinia ultrices venenatis. Duis id aliquam velit, a vehicula quam. Proin iaculis bibendum ex, hendrerit fringilla augue finibus ut. Aliquam sodales turpis vel ex cursus scelerisque. In feugiat justo quis viverra suscipit. Vivamus hendrerit aliquam purus, sit amet ultrices felis. Ut ac nisl pulvinar, tempor odio vel, feugiat ex. Phasellus consequat, leo eget lacinia sagittis, eros tellus pretium tortor, id congue purus augue eu orci. Fusce non eros iaculis, aliquet nulla quis, facilisis mi. Vivamus dictum justo non diam ultricies, sit amet eleifend erat efficitur. Ut porta diam ut dolor tincidunt, interdum placerat odio commodo. Suspendisse egestas sapien erat, et tincidunt magna fermentum sit amet. Donec vitae mi efficitur, tempus nisi ut, lacinia libero. Maecenas auctor odio mi, ac facilisis nisi vehicula efficitur. Ut hendrerit nulla ut nisl porttitor maximus. Pellentesque feugiat bibendum est, ut aliquam velit consequat eu.

Title2

Integer egestas ante id justo mollis feugiat ac vel metus. Nunc pulvinar scelerisque faucibus. Aenean at libero hendrerit, feugiat felis suscipit, facilisis justo. Praesent laoreet rutrum velit vitae facilisis. Fusce ac consectetur leo. Praesent dapibus interdum arcu, et hendrerit mi imperdiet eget. Morbi volutpat, leo id interdum aliquet, massa justo vestibulum nisl, eget posuere velit diam ac nibh. Duis tellus enim, porttitor id lectus vitae, tristique congue odio. Duis elementum porttitor nibh et porta. Suspendisse potenti.

Ut vitae sagittis ex. In porttitor ante in nunc ultrices malesuada. Praesent iaculis odio vitae volutpat tempus. Nullam a sodales lorem, nec pellentesque odio. Praesent ullamcorper nisl commodo justo imperdiet dignissim. Duis purus magna, congue sit amet varius condimentum, dapibus tristique urna. Aliquam congue molestie tempor. Curabitur vel arcu vel nibh euismod porttitor. Sed a dolor maximus ex tempus pharetra rhoncus et nulla. Integer dolor ex, lobortis ac leo non, dapibus cursus ligula. Fusce sed ultrices urna, vel tincidunt mi. Nullam neque dolor, tempor nec lorem vitae, scelerisque consectetur quam.