Sidebar

A sidebar is a vertical navigation element positioned at the side of a webpage used to provide quick access to primary site sections and tools.

Overview

Sidebars serve as the primary navigational hub for complex applications, allowing users to switch between different modules or categories without leaving their current context. They are essential for organizing information hierarchy and improving findability in data-heavy interfaces like dashboards and mail clients.

A Simple Sidebar with Navigation Grouped by Section

This is a clean, collapsible sidebar layout with sectioned navigation, a fixed header area, and a scrollable list of grouped links for documentation-style interfaces.

View on page →

|
Topbar

Content will appear here.

<div class="d-flex vh-100">

  <div id="sidebarSimple" class="border-end d-flex flex-column sidebar-simple">

      <!-- Fixed header area -->
      <div class="p-3">
          <div class="dropdown-center mb-3">
              <a class="btn border-0 shadow-none d-flex justify-content-between w-100 p-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <div class="d-flex gap-2">
                      <img src="https://placehold.co/36x36/31343C/EEE?text=Logo" alt="Logo" width="36" height="36" class="img-fluid rounded">
                      <div class="text-start">
                          <h5 class="fw-medium mb-0">Documentation</h5>
                          <span class="fw-normal">v1.0.1</span>
                      </div>
                  </div>
                  <i class="ri-arrow-down-double-line"></i>
              </a>

              <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">v1.0.1</a></li>
                  <li><a class="dropdown-item" href="#">v1.1.0-alpha</a></li>
                  <li><a class="dropdown-item" href="#">v2.0.0-beta</a></li>
              </ul>
          </div>

          <input type="search" class="form-control w-100" placeholder="Search the docs...">
      </div>

      <!-- Scrollable nav -->
      <div class="flex-grow-1 overflow-auto px-3">
          <ul class="nav flex-column text-nowrap fs-6">
              <li class="nav-item mt-3">
                  <h6 class="text-muted small">Getting Started</h6>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0 active" aria-current="page">Installation</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Project Structure</a>
              </li>

              <li class="nav-item mt-3">
                  <h6 class="text-muted small">Building Your Application</h6>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Routing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Data Fetching</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Rendering</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Caching</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Styling</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Optimizing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Configuring</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Testing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Authentication</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Deploying</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Upgrading</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Examples</a>
              </li>

              <li class="nav-item mt-3">
                  <h6 class="text-muted small">API Reference</h6>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Components</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">File Conventions</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Functions</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">CLI</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Edge Runtime</a>
              </li>

              <li class="nav-item mt-3">
                  <h6 class="text-muted small">Architecture</h6>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Accessibility</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Fast Refresh</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Next Js Compiler</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Supported Browsers</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 px-0">Turbopack</a>
              </li>
          </ul>

      </div>
  </div>

  <!-- Topbar with toggler -->
  <div class="flex-grow-1 d-flex flex-column">
      <header class="border-bottom d-flex align-items-center gap-3 p-3">
          <button id="simpleSidebarToggler" class="btn border-0 shadow-none p-0" aria-controls="sidebarSimple" aria-expanded="true" title="Toggle sidebar">
              <i class="ri-layout-left-line fs-5"></i>
          </button>
          <span class="opacity-25">|</span>
          <h5 class="mb-0">Topbar</h5>
      </header>

      <main class="p-4 bg-body flex-grow-1">
          <p>Content will appear here.</p>
      </main>
  </div>

</div>
.sidebar-simple {
width: 250px;
transition: width 0.3s ease-in-out;
overflow: hidden;
flex-shrink: 0;
}

.sidebar-simple.collapsed {
width: 0;
pointer-events: none;
border-right-width: 0 !important;
}
document.addEventListener('DOMContentLoaded', function () {
const toggler = document.getElementById('simpleSidebarToggler');
const sidebar = document.getElementById('sidebarSimple');

if (!toggler || !sidebar) return;

const mediaQuery = window.matchMedia('(max-width: 768px)');

function setCollapsed(collapsed) {
sidebar.classList.toggle('collapsed', collapsed);
toggler.setAttribute('aria-expanded', String(!collapsed));
sidebar.setAttribute('aria-hidden', String(collapsed));
}

// Initial state (based on screen size)
setCollapsed(mediaQuery.matches);

// Toggle manually
toggler.addEventListener('click', function () {
const isCollapsed = sidebar.classList.contains('collapsed');
setCollapsed(!isCollapsed);
toggler.setAttribute('aria-expanded', String(!isCollapsed));
sidebar.setAttribute('aria-hidden', String(isCollapsed));
});

// Only respond when crossing the breakpoint
mediaQuery.addEventListener('change', function (e) {
setCollapsed(e.matches);
});
});

This is a collapsible documentation-style sidebar featuring section headers with indented submenu links, a fixed header area, and a scrollable navigation region.

View on page →

|
Topbar

Content will appear here.

<div class="d-flex vh-100">

  <div id="sidebarWithSubmenus" class="border-end d-flex flex-column sidebar-with-submenus">

      <!-- Fixed header area -->
      <div class="p-3">
          <div class="dropdown-center mb-3">
              <a class="btn border-0 shadow-none d-flex justify-content-between w-100 p-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <div class="d-flex gap-2">
                      <img src="https://placehold.co/36x36/31343C/EEE?text=Logo" alt="Logo" width="36" height="36" class="img-fluid rounded">
                      <div class="text-start">
                          <h5 class="fw-medium mb-0">Documentation</h5>
                          <span class="fw-normal">v1.0.1</span>
                      </div>
                  </div>
                  <i class="ri-arrow-down-double-line"></i>
              </a>

              <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">v1.0.1</a></li>
                  <li><a class="dropdown-item" href="#">v1.1.0-alpha</a></li>
                  <li><a class="dropdown-item" href="#">v2.0.0-beta</a></li>
              </ul>
          </div>

          <input type="search" class="form-control w-100" placeholder="Search the docs...">
      </div>

      <!-- Scrollable nav -->
      <div class="flex-grow-1 overflow-auto px-3">
          <ul class="nav flex-column text-nowrap fs-6">
              <li class="nav-item">
                  <a href="#" class="nav-link fw-medium py-1">Getting Started</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1 active" aria-current="page">Installation</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Project Structure</a>
              </li>

              <li class="nav-item mt-3">
                  <a href="#" class="nav-link fw-medium py-1">Building Your Application</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Routing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Data Fetching</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Rendering</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Caching</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Styling</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Optimizing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Configuring</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Testing</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Authentication</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Deploying</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Upgrading</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Examples</a>
              </li>

              <li class="nav-item mt-3">
                  <a href="#" class="nav-link fw-medium py-1">API Reference</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Components</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">File Conventions</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Functions</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">CLI</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Edge Runtime</a>
              </li>

              <li class="nav-item mt-3">
                  <a href="#" class="nav-link fw-medium py-1">Architecture</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Accessibility</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Fast Refresh</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Next Js Compiler</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Supported Browsers</a>
              </li>
              <li class="nav-item">
                  <a href="#" class="nav-link py-1">Turbopack</a>
              </li>
          </ul>

      </div>
  </div>

  <!-- Topbar with toggler -->
  <div class="flex-grow-1 d-flex flex-column">
      <header class="border-bottom d-flex align-items-center gap-3 p-3">
          <button id="sidebarWithSubmenusToggler" class="btn border-0 shadow-none p-0" aria-controls="sidebarWithSubmenus" aria-expanded="true" title="Toggle sidebar">
              <i class="ri-layout-left-line fs-5"></i>
          </button>
          <span class="opacity-25">|</span>
          <h5 class="mb-0">Topbar</h5>
      </header>

      <main class="p-4 bg-body flex-grow-1">
          <p>Content will appear here.</p>
      </main>
  </div>

</div>
.sidebar-with-submenus {
width: 250px;
transition: width 0.3s ease-in-out;
overflow: hidden;
flex-shrink: 0;
}

.sidebar-with-submenus.collapsed {
width: 0;
pointer-events: none;
border-right-width: 0 !important;
}

.sidebar-with-submenus .nav-link.fw-medium {
padding-left: 0;
}

.sidebar-with-submenus .nav-link:not(.fw-medium) {
border-left: 1px solid var(--bs-border-color);
}

document.addEventListener('DOMContentLoaded', function () {
const toggler = document.getElementById('sidebarWithSubmenusToggler');
const sidebar = document.getElementById('sidebarWithSubmenus');

if (!toggler || !sidebar) return;

const mediaQuery = window.matchMedia('(max-width: 768px)');

function setCollapsed(collapsed) {
sidebar.classList.toggle('collapsed', collapsed);
toggler.setAttribute('aria-expanded', String(!collapsed));
sidebar.setAttribute('aria-hidden', String(collapsed));
}

// Initial state (based on screen size)
setCollapsed(mediaQuery.matches);

// Toggle manually
toggler.addEventListener('click', function () {
const isCollapsed = sidebar.classList.contains('collapsed');
setCollapsed(!isCollapsed);
toggler.setAttribute('aria-expanded', String(!isCollapsed));
sidebar.setAttribute('aria-hidden', String(isCollapsed));
});

// Only respond when crossing the breakpoint
mediaQuery.addEventListener('change', function (e) {
setCollapsed(e.matches);
});
});

Collapsible Nested Sidebar

This dual-layered sidebar features a slim, persistent icon rail paired with a secondary expandable pane that can be toggled to maximize the primary workspace.

View on page →

Logo
Avatar
Inbox
Bob Johnson 9:34 AM
Weekend Plans
Hey everyone! I'm thinking of organizing a team outing this weekend...
David Lee 1 week ago
New Project Idea
I've been brainstorming and came up with an interesting project concept...
Sophia White 1 week ago
Team Dinner
To celebrate our recent project success, I'd like to organize a team dinner...
Olivia Wilson 1 week ago
Vacation Plans
Just a heads up that I'll be taking a two-week vacation next month...
Alice Smith Yesterday
Re: Project Update
Thanks for the update. The progress looks great so far...
David Lee 1 week ago
New Project Idea
I've been brainstorming and came up with an interesting project concept...
Sophia White 1 week ago
Team Dinner
To celebrate our recent project success, I'd like to organize a team dinner...
Olivia Wilson 1 week ago
Vacation Plans
Just a heads up that I'll be taking a two-week vacation next month...
Alice Smith Yesterday
Re: Project Update
Thanks for the update. The progress looks great so far...
Drafts
You Draft
Draft: Q4 Roadmap
Outline for Q4 objectives and key milestones — still needs review...
You Draft
Draft: Follow-up to Marketing
Short follow-up to confirm next steps after the campaign analysis...
You Draft
Draft: Hiring Interview Questions
A list of candidate questions for the upcoming interviews...
Sent
You → David Lee Today
Sent: Proposal
Sent the final proposal and asked for confirmation on scope and timeline...
You → Sophia White Yesterday
Sent: Event Invitation
Invitation to speak at the upcoming meetup — included topics and logistics...
You → Olivia Wilson 3 days ago
Sent: Expense Report
Submitted the expense report for last month — receipts attached...
Spam
Promo Deals 2 days ago
Limited time: 70% off!
Huge savings on gadgets — offer expires this weekend...
Unknown Sender 1 week ago
You won a prize!
Claim your prize by clicking the link — looks suspicious...
Marketing 3 days ago
Grow your audience fast
Automated tools promise huge reach with minimal effort — unsubscribe if unwanted...
Trash
Old Newsletter 2 months ago
Monthly Digest
Old newsletter archived — saved for records...
Spammy Offer 1 month ago
Claim your reward
Deleted promotional email that looked like a scam...
Draft Backup 3 weeks ago
Old Draft
Old draft message removed during cleanup...
|
Topbar

Select an email to view details here.

<div class="d-flex vh-100">

  <div class="d-flex flex-column flex-shrink-0 border-end p-2">

      <a href="#" class="d-flex align-items-center justify-content-center mb-3">
          <img src="https://placehold.co/36x36/31343C/EEE?text=Logo" alt="Logo" width="36" height="36" class="rounded">
      </a>

      <ul class="nav nav-pills flex-column gap-2" id="sidebarTabs" role="tablist">
          <li class="nav-item">
              <button class="nav-link active" id="inbox-tab" data-bs-toggle="pill" data-bs-target="#inbox-content" type="button" role="tab" data-bs-title="Inbox" data-bs-placement="right">
                  <i class="ri-inbox-archive-line"></i>
              </button>
          </li>
          <li class="nav-item">
              <button class="nav-link" id="drafts-tab" data-bs-toggle="pill" data-bs-target="#drafts-content" type="button" role="tab" data-bs-title="Drafts" data-bs-placement="right">
                  <i class="ri-file-edit-line"></i>
              </button>
          </li>
          <li class="nav-item">
              <button class="nav-link" id="sent-tab" data-bs-toggle="pill" data-bs-target="#sent-content" type="button" role="tab" data-bs-title="Sent" data-bs-placement="right">
                  <i class="ri-send-plane-line"></i>
              </button>
          </li>
          <li class="nav-item">
              <button class="nav-link" id="spam-tab" data-bs-toggle="pill" data-bs-target="#spam-content" type="button" role="tab" data-bs-title="Spam" data-bs-placement="right">
                  <i class="ri-spam-line"></i>
              </button>
          </li>
          <li class="nav-item">
              <button class="nav-link" id="trash-tab" data-bs-toggle="pill" data-bs-target="#trash-content" type="button" role="tab" data-bs-title="Trash" data-bs-placement="right">
                  <i class="ri-delete-bin-line"></i>
              </button>
          </li>
      </ul>

      <div class="mt-auto text-center">
          <a href="#">
              <span class="avatar avatar-md">
                  <img src="https://placehold.co/128x128/31343C/EEE?text=A" class="img-fluid rounded" alt="Avatar">
              </span>
          </a>
      </div>
  </div>

  <div id="sidebarOuter" class="border-end d-flex flex-column sidebar-outer text-nowrap">
      <div class="tab-content flex-grow-1" id="sidebarTabsContent">

          <div class="tab-pane fade show active" id="inbox-content" role="tabpanel">
              <div class="d-flex flex-column h-100">

                  <div class="p-3 border-bottom">
                      <div class="d-flex justify-content-between align-items-center mb-3">
                          <h5 class="mb-0">Inbox</h5>
                          <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" id="unreadSwitch">
                              <label class="form-check-label text-muted" for="unreadSwitch">Unread</label>
                          </div>
                      </div>
                      <input type="search" class="form-control" placeholder="Type to search...">
                  </div>

                  <div class="list-group list-group-flush scrollable-list">
                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Bob Johnson</span>
                              <small>9:34 AM</small>
                          </div>
                          <div class="text-body fw-semibold">Weekend Plans</div>
                          <div class="small text-truncate">Hey everyone! I'm thinking of organizing a team outing this weekend...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">David Lee</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">New Project Idea</div>
                          <div class="small text-truncate">I've been brainstorming and came up with an interesting project concept...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Sophia White</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">Team Dinner</div>
                          <div class="small text-truncate">To celebrate our recent project success, I'd like to organize a team dinner...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Olivia Wilson</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">Vacation Plans</div>
                          <div class="small text-truncate">Just a heads up that I'll be taking a two-week vacation next month...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Alice Smith</span>
                              <small>Yesterday</small>
                          </div>
                          <div class="text-body fw-semibold">Re: Project Update</div>
                          <div class="small text-truncate">Thanks for the update. The progress looks great so far...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">David Lee</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">New Project Idea</div>
                          <div class="small text-truncate">I've been brainstorming and came up with an interesting project concept...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Sophia White</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">Team Dinner</div>
                          <div class="small text-truncate">To celebrate our recent project success, I'd like to organize a team dinner...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Olivia Wilson</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">Vacation Plans</div>
                          <div class="small text-truncate">Just a heads up that I'll be taking a two-week vacation next month...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Alice Smith</span>
                              <small>Yesterday</small>
                          </div>
                          <div class="text-body fw-semibold">Re: Project Update</div>
                          <div class="small text-truncate">Thanks for the update. The progress looks great so far...</div>
                      </a>
                  </div>
              </div>
          </div>

          <div class="tab-pane fade" id="drafts-content" role="tabpanel">
              <div class="d-flex flex-column h-100">

                  <div class="p-3 border-bottom">
                      <div class="d-flex justify-content-between align-items-center mb-3">
                          <h5 class="mb-0">Drafts</h5>
                          <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" id="unreadSwitch">
                              <label class="form-check-label text-muted" for="unreadSwitch">Unread</label>
                          </div>
                      </div>
                      <input type="search" class="form-control" placeholder="Type to search...">
                  </div>

                  <div class="list-group list-group-flush scrollable-list">
                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You</span>
                              <small>Draft</small>
                          </div>
                          <div class="text-body fw-semibold">Draft: Q4 Roadmap</div>
                          <div class="small text-truncate">Outline for Q4 objectives and key milestones — still needs review...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You</span>
                              <small>Draft</small>
                          </div>
                          <div class="text-body fw-semibold">Draft: Follow-up to Marketing</div>
                          <div class="small text-truncate">Short follow-up to confirm next steps after the campaign analysis...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You</span>
                              <small>Draft</small>
                          </div>
                          <div class="text-body fw-semibold">Draft: Hiring Interview Questions</div>
                          <div class="small text-truncate">A list of candidate questions for the upcoming interviews...</div>
                      </a>
                  </div>
              </div>
          </div>

          <div class="tab-pane fade" id="sent-content" role="tabpanel">
              <div class="d-flex flex-column h-100">

                  <div class="p-3 border-bottom">
                      <div class="d-flex justify-content-between align-items-center mb-3">
                          <h5 class="mb-0">Sent</h5>
                          <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" id="unreadSwitch">
                              <label class="form-check-label text-muted" for="unreadSwitch">Unread</label>
                          </div>
                      </div>
                      <input type="search" class="form-control" placeholder="Type to search...">
                  </div>

                  <div class="list-group list-group-flush scrollable-list">
                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You → David Lee</span>
                              <small>Today</small>
                          </div>
                          <div class="text-body fw-semibold">Sent: Proposal</div>
                          <div class="small text-truncate">Sent the final proposal and asked for confirmation on scope and timeline...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You → Sophia White</span>
                              <small>Yesterday</small>
                          </div>
                          <div class="text-body fw-semibold">Sent: Event Invitation</div>
                          <div class="small text-truncate">Invitation to speak at the upcoming meetup — included topics and logistics...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">You → Olivia Wilson</span>
                              <small>3 days ago</small>
                          </div>
                          <div class="text-body fw-semibold">Sent: Expense Report</div>
                          <div class="small text-truncate">Submitted the expense report for last month — receipts attached...</div>
                      </a>
                  </div>
              </div>
          </div>

          <div class="tab-pane fade" id="spam-content" role="tabpanel">
              <div class="d-flex flex-column h-100">

                  <div class="p-3 border-bottom">
                      <div class="d-flex justify-content-between align-items-center mb-3">
                          <h5 class="mb-0">Spam</h5>
                          <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" id="unreadSwitch">
                              <label class="form-check-label text-muted" for="unreadSwitch">Unread</label>
                          </div>
                      </div>
                      <input type="search" class="form-control" placeholder="Type to search...">
                  </div>

                  <div class="list-group list-group-flush scrollable-list">
                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Promo Deals</span>
                              <small>2 days ago</small>
                          </div>
                          <div class="text-body fw-semibold">Limited time: 70% off!</div>
                          <div class="small text-truncate">Huge savings on gadgets — offer expires this weekend...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Unknown Sender</span>
                              <small>1 week ago</small>
                          </div>
                          <div class="text-body fw-semibold">You won a prize!</div>
                          <div class="small text-truncate">Claim your prize by clicking the link — looks suspicious...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Marketing</span>
                              <small>3 days ago</small>
                          </div>
                          <div class="text-body fw-semibold">Grow your audience fast</div>
                          <div class="small text-truncate">Automated tools promise huge reach with minimal effort — unsubscribe if unwanted...</div>
                      </a>
                  </div>
              </div>
          </div>

          <div class="tab-pane fade" id="trash-content" role="tabpanel">
              <div class="d-flex flex-column h-100">

                  <div class="p-3 border-bottom">
                      <div class="d-flex justify-content-between align-items-center mb-3">
                          <h5 class="mb-0">Trash</h5>
                          <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" id="unreadSwitch">
                              <label class="form-check-label text-muted" for="unreadSwitch">Unread</label>
                          </div>
                      </div>
                      <input type="search" class="form-control" placeholder="Type to search...">
                  </div>

                  <div class="list-group list-group-flush scrollable-list">
                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Old Newsletter</span>
                              <small>2 months ago</small>
                          </div>
                          <div class="text-body fw-semibold">Monthly Digest</div>
                          <div class="small text-truncate">Old newsletter archived — saved for records...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Spammy Offer</span>
                              <small>1 month ago</small>
                          </div>
                          <div class="text-body fw-semibold">Claim your reward</div>
                          <div class="small text-truncate">Deleted promotional email that looked like a scam...</div>
                      </a>

                      <a href="#" class="list-group-item list-group-item-action py-3">
                          <div class="d-flex w-100 align-items-center justify-content-between">
                              <span class="text-body fw-medium fs-6">Draft Backup</span>
                              <small>3 weeks ago</small>
                          </div>
                          <div class="text-body fw-semibold">Old Draft</div>
                          <div class="small text-truncate">Old draft message removed during cleanup...</div>
                      </a>
                  </div>
              </div>
          </div>

      </div>
  </div>

  <!-- Topbar with toggler -->
  <div class="flex-grow-1 d-flex flex-column">
      <header class="border-bottom d-flex align-items-center gap-3 p-3">
          <button id="sidebarToggler" class="btn border-0 shadow-none p-0" aria-controls="sidebarOuter" aria-expanded="true" title="Toggle sidebar">
              <i class="ri-layout-left-line fs-5"></i>
          </button>
          <span class="opacity-25">|</span>
          <h5 class="mb-0">Topbar</h5>
      </header>

      <main class="p-4 bg-body flex-grow-1">
          <p>Select an email to view details here.</p>
      </main>
  </div>

</div>
.scrollable-list {
overflow-y: auto;
height: calc(100vh - 140px);
}

.sidebar-outer {
width: 300px;
transition: width 0.3s ease-in-out;
overflow: hidden;
flex-shrink: 0;
}

.sidebar-outer.collapsed {
width: 0;
pointer-events: none;
border-right-width: 0 !important;
}

@media (max-width: 400px) {
.sidebar-outer {
width: 250px;
}
}

@media (max-width: 350px) {
.sidebar-outer {
width: 225px;
}
}
document.addEventListener('DOMContentLoaded', function () {
var tooltipTriggerList = document.querySelectorAll('[data-bs-title]');
tooltipTriggerList.forEach(function (el) {
new bootstrap.Tooltip(el);
});

const toggler = document.getElementById('sidebarToggler');
const sidebar = document.getElementById('sidebarOuter');

if (!toggler || !sidebar) return;

const mediaQuery = window.matchMedia('(max-width: 768px)');

function setCollapsed(collapsed) {
sidebar.classList.toggle('collapsed', collapsed);
toggler.setAttribute('aria-expanded', String(!collapsed));
sidebar.setAttribute('aria-hidden', String(collapsed));
}

// Initial state (based on screen size)
setCollapsed(mediaQuery.matches);

// Toggle manually
toggler.addEventListener('click', function () {
const isCollapsed = sidebar.classList.contains('collapsed');
setCollapsed(!isCollapsed);
toggler.setAttribute('aria-expanded', String(!isCollapsed));
sidebar.setAttribute('aria-hidden', String(isCollapsed));
});

// Only respond when crossing the breakpoint
mediaQuery.addEventListener('change', function (e) {
setCollapsed(e.matches);
});
});

This is a hierarchical navigation interface that allows users to explore and manage complex directory structures through expandable and retractable folders and files.

View on page →

|
Project Explorer

Select a file to edit.

<div class="d-flex vh-100">
  <!-- Sidebar -->
  <div id="sidebarWithFileTree" class="border-end d-flex flex-column sidebar-with-file-tree">
    <div class="flex-grow-1 overflow-auto px-3">
      <ul class="nav flex-column text-nowrap fs-6">
        <li class="nav-item mt-3">
          <h6 class="text-muted fw-medium small">Changes</h6>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link"
            ><i class="ri-file-line"></i>README.md<span class="fw-semibold small ms-auto">M</span></a
          >
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link"
            ><i class="ri-file-line"></i>api/hello/route.ts<span class="fw-semibold small ms-auto">U</span></a
          >
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link"
            ><i class="ri-file-line"></i>app/layout.tsx<span class="fw-semibold small ms-auto">M</span></a
          >
        </li>

        <li class="nav-item mt-3">
          <h6 class="text-muted fw-medium small">Files</h6>
        </li>
        <li class="nav-item">
          <button
            class="nav-link d-flex align-items-center w-100 tree-trigger"
            data-bs-toggle="collapse"
            data-bs-target="#folder-app"
          >
            <i class="ri-arrow-right-s-line chevron"></i>
            <i class="ri-folder-line"></i>app
          </button>
          <div class="collapse" id="folder-app">
            <ul class="nav flex-column ms-3">
              <li class="nav-item"><a href="#" class="nav-link"><i class="ri-file-line"></i>layout.tsx</a></li>
            </ul>
          </div>
        </li>

        <li class="nav-item">
          <button
            class="nav-link d-flex align-items-center w-100 tree-trigger"
            data-bs-toggle="collapse"
            data-bs-target="#folder-components"
            aria-expanded="true"
          >
            <i class="ri-arrow-right-s-line chevron"></i>
            <i class="ri-folder-line"></i>components
          </button>
          <div class="collapse show" id="folder-components">
            <ul class="nav flex-column ms-3">
              <li class="nav-item">
                <button
                  class="nav-link d-flex align-items-center w-100 tree-trigger"
                  data-bs-toggle="collapse"
                  data-bs-target="#folder-ui"
                  aria-expanded="true"
                >
                  <i class="ri-arrow-right-s-line chevron"></i>
                  <i class="ri-folder-line"></i>ui
                </button>
                <div class="collapse show" id="folder-ui">
                  <ul class="nav flex-column ms-3">
                    <li class="nav-item">
                      <a href="#" class="nav-link"><i class="ri-file-line"></i>button.tsx</a>
                    </li>
                    <li class="nav-item">
                      <a href="#" class="nav-link"><i class="ri-file-line"></i>card.tsx</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="nav-item"><a href="#" class="nav-link"><i class="ri-file-line"></i>header.tsx</a></li>
              <li class="nav-item"><a href="#" class="nav-link"><i class="ri-file-line"></i>footer.tsx</a></li>
            </ul>
          </div>
        </li>

        <li class="nav-item"><a href="#" class="nav-link"><i class="ri-file-line"></i>.gitignore</a></li>
        <li class="nav-item"><a href="#" class="nav-link"><i class="ri-file-line"></i>README.md</a></li>
      </ul>
    </div>
  </div>

  <!-- Topbar with toggler -->
  <div class="flex-grow-1 d-flex flex-column">
    <header class="border-bottom d-flex align-items-center gap-3 p-3">
      <button
        id="sidebarWithFileTreeToggler"
        class="btn border-0 shadow-none p-0"
        aria-controls="sidebarWithFileTree"
        aria-expanded="true"
        title="Toggle sidebar"
      >
        <i class="ri-layout-left-line fs-5"></i>
      </button>
      <span class="opacity-25">|</span>
      <h5 class="mb-0">Project Explorer</h5>
    </header>

    <main class="p-4 bg-body flex-grow-1">
      <p>Select a file to edit.</p>
    </main>
  </div>

</div>
.sidebar-with-file-tree {
width: 250px;
transition: width 0.3s ease-in-out;
overflow-x: hidden;
flex-shrink: 0;
}

/_ Sidebar Collapse State _/
.sidebar-with-file-tree.collapsed {
width: 0;
pointer-events: none;
border-right-width: 0 !important;
}

.sidebar-with-file-tree .nav-item .nav-item {
border-left: 1px solid var(--bs-border-color);
padding-left: 0.5rem;
}

/_ File/Folder Link Styling _/
.sidebar-with-file-tree .nav-link {
color: var(--bs-body-color);
padding: 0.5rem;
display: flex;
align-items: center;
border-radius: var(--bs-border-radius);
white-space: nowrap;
}

.sidebar-with-file-tree .nav-link:hover {
background-color: var(--bs-secondary);
}

/_ Chevron Animation _/
.tree-trigger {
background: none;
border: none;
text-align: left;
box-shadow: none;
}

/_ Rotate chevron when the target is NOT collapsed _/
.tree-trigger[aria-expanded='true'] .chevron {
transform: rotate(90deg);
}

.chevron {
transition: transform 0.2s ease;
margin-right: 0.25rem;
}

.sidebar-with-file-tree .nav-link i:not(.chevron) {
margin-right: 0.5rem;
}
document.addEventListener('DOMContentLoaded', function () {
const toggler = document.getElementById('sidebarWithFileTreeToggler');
const sidebar = document.getElementById('sidebarWithFileTree');

if (!toggler || !sidebar) return;

const mediaQuery = window.matchMedia('(max-width: 768px)');

function setCollapsed(collapsed) {
sidebar.classList.toggle('collapsed', collapsed);
toggler.setAttribute('aria-expanded', String(!collapsed));
sidebar.setAttribute('aria-hidden', String(collapsed));
}

// Initial state (based on screen size)
setCollapsed(mediaQuery.matches);

// Toggle manually
toggler.addEventListener('click', function () {
const isCollapsed = sidebar.classList.contains('collapsed');
setCollapsed(!isCollapsed);
toggler.setAttribute('aria-expanded', String(!isCollapsed));
sidebar.setAttribute('aria-hidden', String(isCollapsed));
});

// Only respond when crossing the breakpoint
mediaQuery.addEventListener('change', function (e) {
setCollapsed(e.matches);
});
});
On this page
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation
Jazzup Salon
HomeStyle Furnitech
MAK Holding Group
Takshila Institute
Clinic Demo