Layout

The layout structure consists of two columns. The first column is the sidebar and the second is the app content that takes the remaining width. The basic code of the layout structure can be seen below.

Source code
<div class="app">
  <div class="app-sidebar">
    <div class="sidebar-header"></div>
    <div class="sidebar-nav"></div>
  </div>
  <div class="app-content">
    <div class="content-header"></div>
    <div class="content-body"></div>
  </div>
</div>

Sidebar

The sidebar is the left column of the layout structure and has a header and a navigation. The template was designed using a sidebar with a maximum of two level of navigation.

Header

The header of the sidebar comes first. It contains the user informations like photo and name.

Source code

Navigation

The first level of navigation is defined by a list of links and takes the user to desired page. The second level of navigation is defined by a nested list. Also, you can optionally use headers for group of links defined by class .sidebar-nav-header and line separator defined by the tag hr.

The attribute data-parent configures the accordion menu (refer to bootstrap documentation for details).

Source code

Content

The content is the right column of the layout structure and contains the page content that the user navigated to. The content header is defined by class .content-header and preserves the static position of the navbar. The content body is defined by class .content-body and can contain the components of the bootstrap such as cards, forms, tables and any other components you may need.

Source code
<div class="content-header">
  <nav class="navbar navbar-expand navbar-light bg-white">
    <div class="navbar-brand">Admin 4B</div>
  </nav>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">Layout</li>
      <li class="breadcrumb-item">Sidebar</li>
    </ol>
  </nav>
</div>
<div class="content-body">
  <div class="container">
    Hello World!
  </div>
</div>

Responsive

The template uses the bootstrap breakpoints to define the minimum width to show the sidebar. When hidden the attribute data-toggle="sidebar" can be used to show the sidebar. The sidebar will be hidden whenever the user click outside of the sidebar area.

Source code

Methods

A few methods are available for toggle the sidebar via JavaScript:

Methods
MethodDescription
sidebar('show')Shows the sidebar.
sidebar('hide')Hides the sidebar.

Theming

Theming can be done overriding Sass variables and custom CSS as well as in the bootstrap.

Example

An example code for the full setup of the sidebar can be seen below.

Source code
<div class="app">
  <div class="app-sidebar">
    <div class="sidebar-header">
      <img src="john-doe.png" class="avatar">
      <div class="username">
        <span>John Doe</span>
        <small>[email protected]</small>
      </div>
    </div>
    <div id="sidebar-nav" class="sidebar-nav">
      <ul>
        <li>
          <a href="get-started.html">
            <span class="sidebar-nav-icon fa fa-rocket"></span>
            <span class="sidebar-nav-text">Get started</span>
          </a>
        </li>
      </ul>
      <hr>
      <span class="sidebar-nav-header">
        Guideline
      </span>
      <ul>
        <li>
          <a href="#device-controls" data-toggle="collapse">
            <span class="sidebar-nav-icon fa fa-laptop"></span>
            <span class="sidebar-nav-text">Device controls</span>
          </a>
          <ul id="device-controls" class="collapse" data-parent="#sidebar-nav">
            <li><a href="camera.html">Camera</a></li>
            <li><a href="file-manager.html">File manager</a></li>
          </ul>
        </li>
        <li>
          <a href="#forms" data-toggle="collapse">
            <span class="sidebar-nav-icon fa fa-pencil"></span>
            <span class="sidebar-nav-text">Forms</span>
          </a>
          <ul id="forms" class="collapse" data-parent="#sidebar-nav">
            <li><a href="basic-form.html">Basic form</a></li>
            <li><a href="tabbed-form.html">Tabbed form</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="app-content">
    <div class="content-header">
      <nav class="navbar navbar-expand navbar-light bg-white">
        <div class="navbar-brand">Admin 4B</div>
      </nav>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item">Layout</li>
          <li class="breadcrumb-item">Sidebar</li>
        </ol>
      </nav>
    </div>
    <div class="content-body">
      <div class="container">
        Hello World!
      </div>
    </div>
  </div>
</div>

What's next?

The app structure is complete. From here you can decide what you want to see next.