Sectioned Mini Sidebar

A sectioned mini sidebar built with pure HTML and CSS that organizes navigation elements into clearly defined groups within a compact vertical layout. It enhances content segmentation clarity while maintaining a minimal interface footprint.

Usage

Use this component when layouts require grouped navigation categories, such as admin dashboards, documentation interfaces, profile panels, or application side menus that benefit from structured separation.

Implementation

The structure uses stacked section blocks with labeled group headings and aligned navigation links. CSS manages spacing, divider styling, responsive stacking behavior, and hover states to ensure clean usability across devices.

HTML

<nav class="sidebar-sectioned">
  <div class="sidebar-sectioned__group">
    <span>General</span>
    <button>Overview</button>
  </div>
  <div class="sidebar-sectioned__group">
    <span>Account</span>
    <button>Billing</button>
  </div>
</nav>

<nav class="sidebar-sectioned">
  <div class="sidebar-sectioned__group">
    <span>General</span>
    <button>Overview</button>
  </div>
  <div class="sidebar-sectioned__group">
    <span>Account</span>
    <button>Billing</button>
  </div>
</nav>

CSS

.sidebar-sectioned {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: grid;
  gap: 0.75rem;
}

.sidebar-sectioned__group span {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
}

.sidebar-sectioned__group button {
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  font-size: 12px;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .sidebar-sectioned {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
  }

  .sidebar-sectioned__group button {
    background: #111827;
    color: #e5e7eb;
  }
}

.sidebar-sectioned {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: grid;
  gap: 0.75rem;
}

.sidebar-sectioned__group span {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
}

.sidebar-sectioned__group button {
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  font-size: 12px;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .sidebar-sectioned {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
  }

  .sidebar-sectioned__group button {
    background: #111827;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports clearly defined navigation sections
• Maintains compact vertical layout
• Fully responsive across breakpoints
• Suitable for dashboards and admin panels
• Easy to customize section spacing and dividers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.