Expanding Sidebar Navigation With JavaScript And CSS

Preview:

Description:

A minimal, clean, mobile-friendly expanding sidebar navigation template built on top of JavaScript and CSS.

How to use it:

1. Create the HTML for the sidebar navigation.

<div class="container">
  <!-- Sidebar Nav -->
  <aside class="sidebar">
    <ul class="menu-list">
      <li>
        <div class="menu-container">
          <button class="icon" id="menu">
            <img src="./assets/images/menu.svg" alt="menu" />
          </button>
        </div>
      </li>
      <li>
        <button class="icon" id="search">
          <img src="./assets/images/search.svg" alt="search" />
        </button>
      </li>
      ... more nav items here ...
    </ul>
    <div class="logout-container">
      <button class="icon-logout">
        <img src="./assets/images/log-out.svg" alt="logout" />
      </button>
    </div>
  </aside>
  <!-- Main Content -->
  <section class="main">
    <h1>Dashboard</h1>
  </section>
</div>

2. Load the style.css and script.js in the document.

<link rel=”stylesheet” href=”style.css” />
<script src=”script.js”></script>

3. Override the default styles.

:root {
  --body-bg-color: #dce4e3;
  --green: #18c29c;
  --light-green: #8ed7c6;
  --light-grey: #dce4e3;
  --text-color: #084236;
}