Animated Sidebar Tutorial: How to create a Sidebar in HTML, CSS & JavaScript

This tutorial is easy to follow and will help you create a professional sidebar that works in any browser.

Animated Sidebar Tutorial: How to create a Sidebar in HTML, CSS & JS | Responsive Sidebar Html, CSS

Learn how to create an animated sidebar in HTML, CSS & JS with this responsive sidebar tutorial! This is a professional sidebar tutorial that will help you create a sidebar that is both stylish and responsive.

Let's design toggle Sidebar usign HTML, CSS & JavaScript.

HTML

                            
                                <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <title>Side Navbar</title>
</head>
<body>
    <nav class="sidebar close">
        <header>
            <img src="https://theproviderssolutions.com/public/assets/images/whitetext-1@2x.png" alt="">
            <i class="fa-solid fa-bars toggle"></i>
        </header>

        <ul class="menu">
            <li class="search-box">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" placeholder="Search...">
            </li>

            <li class="nav-link">
                <a href="#">
                    <i class="fa-solid fa-house icon"></i>
                    <span class="text">Home</span>
                </a>
            </li>

            <li class="nav-link">
                <a href="#">
                    <i class="fa-sharp fa-solid fa-chart-simple icon"></i>
                    <span class="text">Revenue</span>
                </a>
            </li>

            <li class="nav-link">
                <a href="#">
                    <i class="fa-solid fa-bell icon"></i>
                    <span class="text">Notifications</span>
                </a>
            </li>

            <li class="nav-link">
                <a href="#">
                    <i class="fa-solid fa-wallet icon"></i>
                    <span class="text">Wallets</span>
                </a>
            </li>

            <li class="nav-link">
                <a href="#">
                    <i class="fa-solid fa-right-from-bracket icon"></i>
                    <span class="text">Logout</span>
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>

Let's CSS

                            
                                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    body {
        min-height: 100vh;
        transition: all 0.3s ease;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        padding: 10px 14px;
        background: #242526;
        transition: all 0.3s ease;
        z-index: 100;
    }

    .sidebar.close {
        width: 88px;
    }

    header {
        height: 100px;
        margin-top: 5em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header img {
        width: 80px;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    .sidebar.close img {
        width: 30px;
    }

    .sidebar .toggle {
        position: absolute;
        top: 5%;
        right: 30px;
        height: 25px;
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #fff;
    }

    .menu li {
        height: 50px;
        list-style: none;
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    .menu li i {
        min-width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: all 0.3s ease;
        color: #ccc;
    }

    li span {
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 1;
        transition: .3s;
        color: #ccc;
    }

    .sidebar.close .text {
        opacity: 0;
    }

    .sidebar .menu {
        margin-top: 20px;
    }

    li.search-box {
        border-radius: 6px;
        background-color: #3a3b3c;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    li.search-box input {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        background-color: #3a3b3c;
        color: #ccc;
        border-radius: 6px;
        font-size: 17px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    li a {
        list-style: none;
        height: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        border-radius: 6px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    li a:hover {
        background-color: #fff;
    }

    li a:hover .icon,
    li a:hover .text {
        color: #242526;
    }

Write Some JavaScript For Toggle Button.

                            
                                <script>
        const body = document.querySelector('body'),
            sidebar = body.querySelector('nav'),
            toggle = body.querySelector(".toggle");

        toggle.addEventListener("click", () => {
            sidebar.classList.toggle("close");
        })
    </script>

Download Code Files