Web Designer Wall

Snippets Admin

Bootstrap 5 Admin Sidebar Menu with Collapsible Rail

The strongest single variant of an admin menu: a responsive admin shell with an icon sidebar that collapses to a hover- and focus-expand rail, a top bar, a highlight banner and a status table.

Bootstrap 5 No jQuery Jan 2020 1.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="wdw-card overflow-hidden admin-shell" id="adminShell">
      <aside class="admin-side" aria-label="Sidebar">
        <div class="d-flex align-items-center gap-2 px-3 admin-brand">
          <span class="wdw-icon" style="width:2.25rem;height:2.25rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span>
          <strong class="admin-label">Simple Admin</strong>
        </div>
        <nav class="nav flex-column gap-1 p-2" id="adminNav">
          <a class="nav-link d-flex align-items-center gap-3 rounded-3 active" href="#" aria-label="Dashboard" title="Dashboard" aria-current="page"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg><span class="admin-label">Dashboard</span></a>
          <a class="nav-link d-flex align-items-center gap-3 rounded-3" href="#" aria-label="Customers" title="Customers"><svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg><span class="admin-label">Customers</span></a>
          <a class="nav-link d-flex align-items-center gap-3 rounded-3" href="#" aria-label="Orders" title="Orders"><svg viewBox="0 0 24 24"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span class="admin-label">Orders</span><span class="badge rounded-pill text-bg-primary ms-auto admin-label">12</span></a>
          <a class="nav-link d-flex align-items-center gap-3 rounded-3" href="#" aria-label="Reports" title="Reports"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 5-6"/></svg><span class="admin-label">Reports</span></a>
          <a class="nav-link d-flex align-items-center gap-3 rounded-3" href="#" aria-label="Settings" title="Settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg><span class="admin-label">Settings</span></a>
        </nav>
      </aside>
      <div class="admin-main">
        <header class="d-flex align-items-center gap-3 px-3 px-md-4 border-bottom admin-top">
          <span class="fw-bold d-sm-none">Dashboard</span>
          <button class="btn btn-outline-secondary btn-sm rounded-pill px-3 d-none d-sm-inline-flex" id="adminToggle" type="button" aria-controls="adminShell" aria-pressed="false"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 3v18"/></svg><span id="adminToggleText">Collapse menu</span></button>
          <span class="ms-auto small wdw-muted d-none d-sm-inline">Hover the rail to peek</span>
          <img class="rounded-circle ms-auto ms-sm-0" src="https://i.pravatar.cc/72?img=12" width="36" height="36" alt="Signed in as Alex Morgan">
        </header>
        <div class="p-3 p-md-4">
          <div class="rounded-4 p-4 mb-4 wdw-aurora">
            <span class="wdw-eyebrow text-white opacity-75">Overview</span>
            <h1 class="h3 fw-bold mb-1">Good morning, Alex</h1>
            <p class="mb-3 text-white" style="opacity:.9">Revenue is up 8.2% this week. Three orders need your attention.</p>
            <a class="btn btn-light btn-sm rounded-pill px-3" href="#">Review orders</a>
          </div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="d-none d-sm-table-cell">#</th><th>Customer</th><th class="d-none d-sm-table-cell">Plan</th><th class="text-end">Status</th></tr></thead>
              <tbody>
                <tr><td class="d-none d-sm-table-cell">1</td><td>Mark Otto</td><td class="d-none d-sm-table-cell">Pro</td><td class="text-end"><span class="badge bg-success-subtle text-success-emphasis">Active</span></td></tr>
                <tr><td class="d-none d-sm-table-cell">2</td><td>Jacob Thornton</td><td class="d-none d-sm-table-cell">Team</td><td class="text-end"><span class="badge bg-warning-subtle text-warning-emphasis">Pending</span></td></tr>
                <tr><td class="d-none d-sm-table-cell">3</td><td>Larry Bird</td><td class="d-none d-sm-table-cell">Starter</td><td class="text-end"><span class="badge bg-success-subtle text-success-emphasis">Active</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More admin snippets