Dashboard Sidebar - HTML CSS Bootstrap

Home/Components/Sidebars/Dashboard Sidebar - HTML CSS Bootstrap

Code · Live Preview

Componenthtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Sidebar | CodeKK</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">

</head>
<body>

<aside class="sidebar">

  <div class="brand">
    <div class="brand-mark">NX</div>
    <div>
      <div class="brand-name">Nexora</div>
      <div class="brand-sub">Workspace</div>
    </div>
  </div>
  <div class="brand-divider"></div>

  <nav class="nav-scroll">

    <a href="#" class="nav-link-flat active">
      <i class="bi bi-grid-1x2-fill"></i> Overview
    </a>

    <div class="nav-label">Manage</div>

    <div class="accordion" id="sidebarAccordion">

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#grpSales">
            <i class="bi bi-bag-fill group-icon"></i> Sales
          </button>
        </h2>
        <div id="grpSales" class="accordion-collapse collapse" data-bs-parent="#sidebarAccordion">
          <div class="accordion-body">
            <a href="#" class="sub-link">Orders</a>
            <a href="#" class="sub-link">Customers</a>
            <a href="#" class="sub-link">Transactions</a>
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#grpContent">
            <i class="bi bi-layout-text-window-reverse group-icon"></i> Content
          </button>
        </h2>
        <div id="grpContent" class="accordion-collapse collapse" data-bs-parent="#sidebarAccordion">
          <div class="accordion-body">
            <a href="#" class="sub-link">Pages</a>
            <a href="#" class="sub-link">Media library</a>
            <a href="#" class="sub-link">Categories</a>
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#grpReports">
            <i class="bi bi-bar-chart-fill group-icon"></i> Reports
          </button>
        </h2>
        <div id="grpReports" class="accordion-collapse collapse" data-bs-parent="#sidebarAccordion">
          <div class="accordion-body">
            <a href="#" class="sub-link">Analytics</a>
            <a href="#" class="sub-link">Exports</a>
          </div>
        </div>
      </div>

    </div>

  </nav>

  <!-- Admin / settings footer -->
  <div class="profile-wrap">
    <button class="profile-btn" type="button" data-bs-toggle="collapse" data-bs-target="#logoutCollapse" aria-expanded="false" aria-controls="logoutCollapse">
      <div class="avatar">MG</div>
      <div class="profile-text">
        <div class="profile-name">Michael Grant</div>
        <div class="profile-email">michael@nexora.io</div>
      </div>
      <i class="bi bi-chevron-up profile-caret"></i>
    </button>

    <div class="collapse logout-panel" id="logoutCollapse">
      <button class="logout-btn" type="button">
        <i class="bi bi-box-arrow-right"></i> Log out
      </button>
    </div>
  </div>
<!-- <a href="https://codekk.dev/" target="_blank" rel="noopener noreferrer">Codekk</a> -->
</aside>

<div class="demo-main">Page content goes here</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Detecting libraries...

Component details

Overview, install command, dependencies, and project links.

A dark-themed dashboard sidebar built with Bootstrap 5 - uses Bootstrap's accordion component for navigation, restyled to drop the boxy default look. The header holds an organization logo mark and name. Nav groups (Sales, Content, Reports) expand into sub-links via accordion buttons with a rotating chevron; a flat "Overview" link sits above them for a top-level page. The footer is an admin profile card - avatar initials, name, and email - with a caret button that expands into a logout button using Bootstrap's collapse component. Gold accent color defined in CSS custom properties, so re-theming is a one-line change. Manrope font from Google Fonts. Two files - index.html and style.css - drop in a folder and open in a browser.

Added Sep 9, 2026

Discussion

Feedback, implementation tips, and usage notes.

0 threads

Component details

Discussion

Comments