Demo

Download

---

A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS.

The sidebar menu is displayed in Compact mode on page load and will expand to Full mode when hovering over.

It collapses the sidebar into an off-canvas navigation on mobile, and your visitors are able to reveal the menu by clicking the hamburger button.

How to use it:

1. Create the HTML for the sidebar menu. By default, we use boxicons for the menu icons.

<div class="nav" id="navbar">
  <nav class="nav__container">
    <div>
      <a href="#" class="nav__link nav__logo">
      <i class='bx bxs-disc nav__icon' ></i>
      <span class="nav__logo-name">Bedimcode</span>
      </a>
      <div class="nav__list">
        <div class="nav__items">
          <h3 class="nav__subtitle">Profile</h3>
          <a href="#" class="nav__link active">
          <i class='bx bx-home nav__icon' ></i>
          <span class="nav__name">Home</span>
          </a>
          <div class="nav__dropdown">
            <a href="#" class="nav__link">
            <i class='bx bx-user nav__icon' ></i>
            <span class="nav__name">Profile</span>
            <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
            </a>
            <div class="nav__dropdown-collapse">
              <div class="nav__dropdown-content">
                <a href="#" class="nav__dropdown-item">Passwords</a>
                <a href="#" class="nav__dropdown-item">Mail</a>
                <a href="#" class="nav__dropdown-item">Accounts</a>
              </div>
            </div>
          </div>
          <a href="#" class="nav__link">
          <i class='bx bx-message-rounded nav__icon' ></i>
          <span class="nav__name">Messages</span>
          </a>
        </div>
        <div class="nav__items">
          <h3 class="nav__subtitle">Menu</h3>
          <div class="nav__dropdown">
            <a href="#" class="nav__link">
            <i class='bx bx-bell nav__icon' ></i>
            <span class="nav__name">Notifications</span>
            <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
            </a>
            <div class="nav__dropdown-collapse">
              <div class="nav__dropdown-content">
                <a href="#" class="nav__dropdown-item">Blocked</a>
                <a href="#" class="nav__dropdown-item">Silenced</a>
                <a href="#" class="nav__dropdown-item">Publish</a>
                <a href="#" class="nav__dropdown-item">Program</a>
              </div>
            </div>
          </div>
          <a href="#" class="nav__link">
          <i class='bx bx-compass nav__icon' ></i>
          <span class="nav__name">Explore</span>
          </a>
          <a href="#" class="nav__link">
          <i class='bx bx-bookmark nav__icon' ></i>
          <span class="nav__name">Saved</span>
          </a>
        </div>
      </div>
    </div>
    <a href="#" class="nav__link nav__logout">
    <i class='bx bx-log-out nav__icon' ></i>
    <span class="nav__name">Log Out</span>
    </a>
  </nav>
</div>

2. Add the hamburger toggle button to your header.

<header class="header">
  ...
  <div class="header__toggle">
    <i class='bx bx-menu' id="header-toggle"></i>
  </div>
  </div>
</header>

3. The necessary CSS styles for the sidebar menu.

/*========== VARIABLES CSS ==========*/
:root {
  --header-height: 3.5rem;
  --nav-width: 219px;

  /*========== Colors ==========*/
  --first-color: #6923D0;
  --first-color-light: #F4F0FA;
  --title-color: #19181B;
  --text-color: #58555E;
  --text-color-light: #A5A1AA;
  --body-color: #F9F6FD;
  --container-color: #FAFAFA;

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --normal-font-size: .938rem;
  --small-font-size: .75rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-fixed: 100;
}

.nav {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  padding: 1rem 1rem 0;
  background-color: var(--container-color);
  box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
  z-index: var(--z-fixed);
  transition: .4s;
}

.nav__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3rem;
  overflow: auto;
  scrollbar-width: none; /* For mozilla */
}

/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
  display: none;
}

.nav__logo {
  font-weight: var(--font-semi-bold);
  margin-bottom: 2.5rem;
}

.nav__list,
.nav__items {
  display: grid;
}

.nav__list {
  row-gap: 2.5rem;
}

.nav__items {
  row-gap: 1.5rem;
}

.nav__subtitle {
  font-size: var(--normal-font-size);
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: var(--text-color-light);
}

.nav__link {
  display: flex;
  align-items: center;
  color: var(--text-color);
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__icon {
  font-size: 1.2rem;
  margin-right: .5rem;
}

.nav__name {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.nav__logout {
  margin-top: 5rem;
}

/* Dropdown */
.nav__dropdown {
  overflow: hidden;
  max-height: 21px;
  transition: .4s ease-in-out;
}

.nav__dropdown-collapse {
  background-color: var(--first-color-light);
  border-radius: .25rem;
  margin-top: 1rem;
}

.nav__dropdown-content {
  display: grid;
  row-gap: .5rem;
  padding: .75rem 2.5rem .75rem 1.8rem;
}

.nav__dropdown-item {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
}

.nav__dropdown-item:hover {
  color: var(--first-color);
}

.nav__dropdown-icon {
  margin-left: auto;
  transition: .4s;
}

/* Show dropdown collapse */
.nav__dropdown:hover {
  max-height: 100rem;
}

/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
  transform: rotate(180deg);
}

/*===== Show menu =====*/
.show-menu {
  left: 0;
}

/*===== Active link =====*/
.active {
  color: var(--first-color);
}