1. Docs
  2. Components
  3. Sidebar
Buy Now Contact

Sidebar

Displayed alongside the main content and used to view different pages of the web/dashboard application

Usage

  • Sidebar must be wrapped by .o-page__sidebar for adjusting its layout.
  • Control the width of sidebar using .o-page__sidebar class.
  • Sidebar behaviour is controlled via javascript using .js-page-sidebar class.
  • Sidebar will be hidden at $breakpoint-desktop and toggled via .c-sidebar-toggle.
<div class="o-page__sidebar js-page-sidebar">
    <div class="c-sidebar">
        <a class="c-sidebar__brand u-ml-medium" href="#">
            <img class="c-sidebar__brand-img" src="../img/logo.svg" alt="Logo">Dashboard
        </a>
        <span class="c-sidebar__divider"></span>   
        <h4 class="c-sidebar__title">Main</h4>
        <ul class="c-sidebar__list">
            <li class="c-sidebar__item">
                <a class="c-sidebar__link is-active" href="#">
                    <i class="fa fa-home u-mr-xsmall">Overview
                </a>
            </li>
            <li class="c-sidebar__item has-submenu">
                <a class="c-sidebar__link" data-toggle="collapse" href="#sidebar-submenu" aria-expanded="false" aria-controls="siebar-menu">
                    <i class="fa fa-pie-chart u-mr-xsmall"></i>Analytics
                </a>
                <ul class="c-sidebar__submenu collapse" id="sidebar-submenu">
                    <li><a class="c-sidebar__link" href="#">Sub menu link</a></li>
                    <li><a class="c-sidebar__link" href="#">Sub menu link</a></li>
                    <li><a class="c-sidebar__link" href="#">Sub menu link</a></li>
                </ul>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" href="#">
                    <i class="fa fa-home u-mr-xsmall"></i>Overview
                </a>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" href="#">
                    <i class="fa fa-home u-mr-xsmall"></i>Overview
                </a>
            </li>
        </ul>
    </div>
</div>

A button to show/hide sidebar on small screens.

The sidebar toggle is visble at $breakpoint-desktop and smaller breakpoints and is usually placed in the navbar.

<button class="c-sidebar-toggle">
    <span class="c-sidebar-toggle__bar"></span>
    <span class="c-sidebar-toggle__bar"></span>
    <span class="c-sidebar-toggle__bar"></span>
</button>

Light Sidebar

The light version of sidebar.

You can change sidebar’s default style to the light version by adding c-sidebar--light class.

<div class="o-page__sidebar js-page-sidebar">
    <div class="c-sidebar c-sidebar--light">
        ...
    </div>
</div>

Minimized Sidebar

We recommend using the minimized sidebar for your project when the sidebar is simple and doesn’t have a lot of links but if you have a complex sidebar then you shouldn’t use this type of sidebar.

<div class="o-page__sidebar is-minimized js-page-sidebar">
    <div class="c-sidebar is-minimized">
        <a class="c-sidebar__brand" href="#">
            <img class="c-sidebar__brand-img" src="/img/logo.svg" alt="Logo">
            <span class="c-sidebar__brand-text">Dashboard</span>
        </a>
        <ul class="c-sidebar__list">
            <li class="c-sidebar__item">
                <a class="c-sidebar__link is-active" href="home-overview.html">
                    <span class="c-sidebar__icon">
                        <i class="fa fa-home"></i>
                    </span>Overview
                </a>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" href="performance.html">
                    <span class="c-sidebar__icon">
                        <i class="fa fa-tachometer"></i>
                    </span>Performance
                </a>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" href="analytics.html">
                    <span class="c-sidebar__icon">
                        <i class="fa fa-line-chart"></i>
                    </span>Analytics
                </a>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" target="_blank" href="index.html">
                    <span class="c-sidebar__icon">
                        <i class="fa fa-rocket"></i>
                    </span>Landing
                </a>
            </li>
            <li class="c-sidebar__item">
                <a class="c-sidebar__link" target="_blank" href="projects.html">
                    <span class="c-sidebar__icon">
                        <i class="fa fa-table"></i>
                    </span>Projects
                </a>
            </li>
        </ul>
    </div><!-- // .c-sidebar -->
</div>