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.

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');
      });

Key Features:

Responsive Design: The sidebar is fully responsive and smoothly transitions in and out, providing a seamless experience across all devices.
Toggle Button: A simple button to show or hide the sidebar, making it accessible only when needed.
Close Button: An intuitive cross (close) button inside the sidebar allows users to hide the sidebar without leaving the main content area.
Smooth Transitions: The sidebar slides in and out with smooth CSS transitions, enhancing the visual appeal.
Customizable: Easy to modify the look, icons, and content within the sidebar to fit your website’s design and functionality needs.

Steps to Copy the Code:

HTML Structure:
- Copy the HTML structure provided, which includes the sidebar and the toggle button.
- Ensure you include Bootstrap CSS and JS links in the <head> section of your HTML file.
CSS Styling:
- The CSS for the sidebar and close button is embedded in the <style> tags.
- Copy the provided styles and ensure they are placed within the <head> section or an external stylesheet.
JavaScript Functionality:
- The JavaScript code at the bottom handles the sidebar toggling and closing functionalities.
- Place this script just before the closing </body> tag in your HTML file.
Bootstrap Icons and JS Links:
- Ensure you include the links to Bootstrap Icons and Bootstrap’s JavaScript libraries for the icons and dropdowns to function properly.
Customization:
- Customize the content inside the sidebar, including links, icons, and titles, to suit your website’s design.
- Explanation for Additional Code:
  1. Favicon (<link rel="icon" type="image/svg+xml" href="/vite.svg" />):
    - This line sets a favicon for your webpage. The href attribute specifies the path to the favicon file (vite.svg), and the type attribute defines the file type as an SVG image. The favicon appears in the browser tab when users visit your site.
  2. Viewport Meta Tag (<meta name="viewport" content="width=device-width, initial-scale=1.0" />):
    - The viewport meta tag controls how your webpage is displayed on different devices. Setting width=device-width makes the page width match the screen’s width, and initial-scale=1.0 ensures the page is displayed at the correct zoom level on mobile devices. This is essential for responsive design, ensuring your site looks good on all screen sizes.
  3. Title Tag (<title>Vite + TS</title>):
    - The <title> tag sets the title of the webpage, which appears in the browser tab. In this case, it’s set to "Vite + TS". This title is also used when the page is bookmarked or shared.
  4. Bootstrap CSS (<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">):
    - This link imports Bootstrap’s CSS from a CDN (Content Delivery Network). Bootstrap is a popular CSS framework that provides pre-designed components and responsive grid layouts, making it easier to build responsive and stylish web pages. By linking this file, you can use Bootstrap’s classes and components in your HTML.
  5. Bootstrap Icons (<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">):
    - This link imports Bootstrap Icons, a library of free, high-quality icons. The icons can be easily used by adding classes like bi bi-x-lg to your HTML elements. This is especially useful for adding visual cues like the close button (cross mark) in your sidebar.

Code Explanation:

HTML Structure:
- The sidebar is created using a <div> element with the class sidebar. It contains a close button (bi-x-lg), a brand name, and a navigation list with various items.
- A button with the ID sidebarToggle is placed outside the sidebar to toggle its visibility.
CSS Styling:
- The .sidebar class positions the sidebar off-screen initially (left: -280px) and transitions it smoothly on toggle.
- The .sidebar.show class brings the sidebar into view by changing its left position to 0.
- The .close-btn class styles the close button, positioning it at the top-right of the sidebar for easy access.
JavaScript:
- The JavaScript adds interactivity by toggling the sidebar’s visibility when the sidebarToggle button is clicked.
- The closeSidebar button removes the show class from the sidebar, hiding it when the close button is clicked.
Responsive and Interactive:
- The sidebar is designed to be responsive, meaning it will work well on different screen sizes. The smooth transitions enhance the user experience, making the navigation intuitive and engaging.

Interactive Sidebar

Key Features:

Steps to Copy the Code:

Explanation for Additional Code:

Code Explanation: