---
title: Sidebar Basics
layout: nested-component.html
---

<h1 class="docs--page-header">Sidebar Basics</h1>

<p class="docs--section-description">
    Who is your sidebar, and what does he do?
</p>


<div class="core-layout__sidebar" style="min-height: 100vh;">
    <div class="sidebar">
        <div class="sidebar__header">
            <span class="pull-left">
                Sections
            </span>
            <a href="#" class="pull-right">
                <i class="fa fa-plus"></i>
                <span class="text-white">Add Section</span>
            </a>
        </div>
        <div class="sidebar__content">
            <div class="list-group list-group-inverse">

                <a href="#" class="list-group-item">
                    Default
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Edit Section" data-container="body">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Delete Section" data-container="body">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>

                <a href="#" class="list-group-item active">
                    Default
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Edit Section" data-container="body">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Delete Section" data-container="body">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>

                <a href="#" class="list-group-item">
                    Default
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Edit Section" data-container="body">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Delete Section" data-container="body">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>

                <a href="#" class="list-group-item">
                    Default
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Edit Section" data-container="body">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Delete Section" data-container="body">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>

                <a href="#" class="list-group-item">
                    Default
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm">
                            <i class="fa fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Edit Section" data-container="body">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm"
                                data-toggle="tooltip" title="Delete Section" data-container="body">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>

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