Expanding Sidebar Navigation With JavaScript And CSS

Category: Javascript , Menu & Navigation | December 7, 2022
Views Total:2,345 views
Official Page:Go to website
Last Update:December 7, 2022


Expanding Sidebar Navigation With JavaScript And CSS


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">
        <div class="menu-container">
          <button class="icon" id="menu">
            <img src="./assets/images/menu.svg" alt="menu" />
        <button class="icon" id="search">
          <img src="./assets/images/search.svg" alt="search" />
      ... more nav items here ...
    <div class="logout-container">
      <button class="icon-logout">
        <img src="./assets/images/log-out.svg" alt="logout" />
  <!-- Main Content -->
  <section class="main">

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;

You Might Be Interested In:

Leave a Reply