2+ Sidebar Components - Bootstrap

Welcome to our curated collection of Bootstrap sidebar designs! If you're looking to enhance the navigation and overall user experience of your website, you've come to the right place. A sidebar is a crucial element in web design, offering a convenient way for users to access important information or navigate between different sections of a website. With Bootstrap, a popular front-end framework, creating sleek and functional sidebars has never been easier. In this collection, we've handpicked a variety of sidebar templates that are not only visually appealing but also easy to implement. Whether you're building a personal blog, an e-commerce platform, or a corporate website, our collection has something for everyone. Let's dive in and explore the possibilities of Bootstrap sidebars!

Responsive Offcanvas Sidebar

Learn how to implement a responsive offcanvas sidebar using Bootstrap 5. Perfect for enhancing your website's navigational experience with a sleek and responsive sidebar

Author: Admin

Preview
Code

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Offcanvas Sidebar</h3>
  <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

```
No Custom CSS
```
```
No need of JavaScript
```

Interactive Sidebar

Create a responsive, interactive sidebar with Bootstrap that toggles on button click and includes a built-in close button for easy navigation. Ideal for enhancing user experience on your website.

Author: CoreUI

Preview
Code

<div id="sidebar" class="sidebar text-white">
      <i id="closeSidebar" class="bi bi-x-lg close-btn"></i> <!-- Close Button -->
      <div class="border-bottom pb-2 mb-3">
        <span class="fs-4">CoreUI</span>
      </div>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="#" class="nav-link text-white active" aria-current="page">
            <i class="bi bi-speedometer2"></i> Nav item
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-white">
            <i class="bi bi-speedometer2"></i> With badge
            <span class="badge bg-primary rounded-pill ms-auto">NEW</span>
          </a>
        </li>
        <li>
          <a href="#" class="nav-link text-white dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#dropdownMenu" aria-expanded="false">
            <i class="bi bi-puzzle"></i> Nav dropdown
          </a>
          <ul class="collapse" id="dropdownMenu">
            <li class="nav-item">
              <a href="#" class="nav-link text-white ps-5">Nav dropdown item</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link text-white ps-5">Nav dropdown item</a>
            </li>
          </ul>
        </li>
        <li class="nav-item mt-5">
          <a href="https://coreui.io" class="nav-link text-white">
            <i class="bi bi-cloud-download"></i> Download CoreUI
          </a>
        </li>
        <li class="nav-item">
          <a href="https://coreui.io/pro/" class="nav-link text-white">
            <i class="bi bi-layers"></i> Try CoreUI <strong>PRO</strong>
          </a>
        </li>
      </ul>
    </div>

    <button id="sidebarToggle" class="btn btn-primary m-3" type="button">Toggle Sidebar</button>

body {
        overflow-x: hidden; /* Prevent horizontal scroll */
      }
      .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -280px; /* Initially hidden */
        width: 280px;
        padding-top: 20px;
        background-color: #343a40;
        transition: left 0.3s ease; /* Smooth transition */
        z-index: 1000; /* Ensure sidebar is above other content */
      }
      .sidebar.show {
        left: 0; /* Sidebar visible */
      }
      .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
        color: white;
        cursor: pointer;
      }

<!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <script>
      // Sidebar Toggle Script
      const sidebar = document.getElementById('sidebar');
      const toggleButton = document.getElementById('sidebarToggle');
      const closeSidebar = document.getElementById('closeSidebar');

      // Toggle sidebar when the button is clicked
      toggleButton.addEventListener('click', () => {
        sidebar.classList.toggle('show');
      });

      // Close sidebar when the close button is clicked
      closeSidebar.addEventListener('click', () => {
        sidebar.classList.remove('show');
      });

Bootstrap 5 Sidebar

Elevate your website's layout with a sleek sidebar designed using Bootstrap 5. Learn how to easily integrate a versatile sidebar to enhance navigation and organization on your site.

Author: Admin

Preview
Code

<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark h-100" style="width: 280px;">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <span class="fs-4">Sidebar</span>
  </a>
  <hr>
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="#" class="nav-link active" aria-current="page">
        Home
      </a>
    </li>
    <li>
      <a href="#" class="nav-link text-white">
        Dashboard
      </a>
    </li>
    <li>
      <a href="#" class="nav-link text-white">
        Orders
      </a>
    </li>
    <li>
      <a href="#" class="nav-link text-white">
        Products
      </a>
    </li>
    <li>
      <a href="#" class="nav-link text-white">
        Customers
      </a>
    </li>
  </ul>
  <hr>
  <div class="dropdown">
    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
      <img src="https://frontendcomponent.com/favicon.ico" alt="" width="32" height="32" class="rounded-circle me-2">
      <strong>FC</strong>
    </a>
  </div>
</div>

```
No Custom CSS
```
```
No need of JavaScript
```