Sidebars

Sidebars are a way to provide additional navigation elements to a given page or set of pages. The sidebar component is demonstrated on the left side of this page and is broken down into a category and it’s corresponding links. The sidebar borders can be set using the left or right corresponding sidebar classes. Javascript can be added to expand and collapse each individual section.

Code Example:

    
        <div class="sidebar sidebar-left">
            <h3 class="sidebar-category">Components</h3>
            <ul class="sidebar-links">
                <li><a href="#">Alerts</a></li>
                <li><a href="#">Breadcrumbs</a></li>
                <li><a class="active" href="#">Cards</a></li>
                <li><a href="#">Footer</a></li>
                <li><a href="#">Header</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Modal</a></li>
                <li><a href="#">Navigation</a></li>
                <li><a href="#">Pagination</a></li>
                <li><a href="#">Panels</a></li>
                <li><a href="#">Progress Bars</a></li>
                <li><a href="#">Sidebar</a></li>
                <li><a href="#">Steppers</a></li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Tags</a></li>
                <li><a href="#">Tooltips</a></li>
            </ul>
        </div>