Sidebar

A container besides your content to display widgets or more information regards the page.

Sidebar

This page contains sample HTML code to teach you how you can have a sidebar in your page. Our template use the Bootstrap grid system to specify the size of sidebar, so changing the size, side and spacing for the sidebar would so easy.

Layout

The following code demonstrates the HTML code you should have in your page to implement a sidebar. To make your task easier, we'll provide two sample codes; the first one for left-sided sidebar (like this page) and the second sample is for a right-sided sidebar.

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

      <!-- Sidebar -->
      <div class="col-md-4 col-xl-3">
        <aside class="sidebar"></aside>
      </div>

      <!-- Content -->
      <div class="col-md-7 col-xl-8 ml-md-auto py-9">

      </div>

    </div>
  </div>
</main>


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

      <!-- Content -->
      <div class="col-md-7 col-xl-8 mr-md-auto py-9">

      </div>

      <!-- Sidebar -->
      <div class="col-md-4 col-xl-3">
        <aside class="sidebar"></aside>
      </div>

    </div>
  </div>
</main>

Notes
  • As you notices, we left one of the twelve columns empty as a gap between content and sidebar.
  • By default, the .sidebar class has .py-9 for vertical spacing which is equal to spacing of a section. So if you insert a .section element inside the content column, you should remove the .py-9 from class="col-md-7 col-xl-8 mr-md-auto py-9"
  • Feel free to replace the .container class with .container-fluid to have a wider container.

Variations

Like any other components in our UI Kit, you can change the UI and behavior of sidebar component as well. Make it sticky, change the navigation style or even put your desire content inside the sidebar.

Behavior

We know that most of sidebars are sticky these days. You can make the sidebar sticky as easy as adding .sidebar-sticky class to the .sidebar tag.

Navigation

A special navigation has designed to place inside your sidebar. You simply need to add a .nav-sidebar to a normal nav. Also, the .nav-sidebar has two modifiers as well:

  • .nav-sidebar-hero: To make text larger (like this page)
  • .nav-sidebar-pill: To add a colored background to the active link

Scrollspy

The Scrollspy is a Bootstrap component to automatically update the navigation based on scroll position to indicate which link is currently active in the viewport. You can have one of them in your page by adding the following code to your <body> tag.

data-spy="scroll" data-target=".nav-sidebar"

You can add an offset value to set an offset from top when calculating position of scroll. The default value is 10 which is equals to add data-offset="10".




The below is white space only for demo purpose to make sure you can scroll down enough.